Solved

CSS HTML Text Alignment

Posted on 2014-04-17
13
416 Views
Last Modified: 2014-04-21
I am having a hard time with a simple menu on a web page using CSS. I have attached all of my files. I have two backgrounds aligning just as they should. The issue is, I can’t gets the navigation to stay put when I make the browser (any browser type) larger and/or smaller. I am not sure if it is an issue with my CSS background code, CSS .Nav tags, or HTML code calling the CSS. As you can see it does not stay on my navigation grey bar. I think it is something so simple but I can’t seem to figure it out. Also, when adding more content how do I make sure that data stays put as well and doesn’t move as the browser gets larger or smaller? Thank you for your help!
images.zip
0
Comment
Question by:sparker1970
  • 7
  • 6
13 Comments
 
LVL 52

Expert Comment

by:Scott Fell, EE MVE
ID: 40007772
Hi sparker1970,

Please don't make us open up a zip file.  Simply upload the files to your server and give us the url. IF there is private data, strip that out.  We don't need your 1000 lines of code, just the important part.    See http://www.sscce.org/

If for whatever reason there is no way to make this work on your own server, you can recreated in a playground like http://jsbin.com/
0
 

Author Comment

by:sparker1970
ID: 40008821
Sorry about that. Usually I'm only looking for help on small coding issues. I am pasting only the 2 CSS files for review:

style.css

body {background:url(bg.jpg) repeat;border:0;font:14px Arial, Helvetica, sans-serif;color:#363636; padding:0px; text-align:center;}

body, html {height:100%}
.body1 {background:url(index.jpg) center center no-repeat;height:100%;min-height:1000px;width:100%;min-width:1000px}

a:link {color:white; text-decoration:none;} /* unvisited link */
a:visited {color:white;}
a:hover {color:yellow; text-decoration:none;}  /* mouse over link */
a:active {color:yelow; text-decoration:none;}  /* selected link */


.social
{
position:absolute;
right:350px;
top:0px;
}

.social2
{
position:absolute;
right:295px;
top:0px;
}

.social3
{
position:absolute;
right:240px;
top:0px;
}

.social4
{
position:absolute;
right:185px;
top:0px;
}

.Nav
{
    margin:0px auto;
	text-align:center;
	padding:168px;
	margin-left:-900px;
font:15px Arial;
font-weight: bold;
color:white;

}

.Nav2
{
position:absolute;
left:170px;
top:168px;
font:15px Arial;
font-weight: bold;
color:white;
}

.Nav3
{
position:absolute;
left:460px;
top:168px;
font:15px Arial;
font-weight: bold;
color:white;
}

.Nav4
{
position:absolute;
Right:250px;
top:168px;
font:15px Arial;
font-weight: bold;
color:white;
}

.Nav5
{
position:absolute;
right:90px;
top:168px;
font:15px Arial;
font-weight: bold;
color:white;
}

reset.css

a, abbr, acronym, address, applet, article, aside, audio,
b, blockquote, big, body,
center, canvas, caption, cite, code, command,
datalist, dd, del, details, dfn, dl, div, dt, 
em, embed,
fieldset, figcaption, figure, font, footer, form, 
h1, h2, h3, h4, h5, h6, header, hgroup, html,
i, iframe, img, ins,
kbd, 
keygen,
label, legend, li, 
meter,
nav,
object, ol, output,
p, pre, progress,
q, 
s, samp, section, small, span, source, strike, strong, sub, sup,
table, tbody, tfoot, thead, th, tr, tdvideo, tt,
u, ul, 
var{
    background: transparent;
    border: 0 none;
    font-size: 100%;
    margin: 0;
		padding: 0;
		border: 0;
		outline: 0;
    vertical-align: top; }

ol, ul {
	list-style: none;
}
blockquote, q {
	quotes: none;
}
table, table td { 
	padding:0;
	border:none;
	border-collapse:collapse;
}
img {
	vertical-align:top; 
}
embed { 
	vertical-align:top;
}

Open in new window

Is this better. I do not have an open location to share these as an actual web page.
0
 

Author Comment

by:sparker1970
ID: 40008830
also, here's the index.html file

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<link rel="stylesheet" type="text/css" href="reset.css" media="screen">
<link rel="stylesheet" type="text/css" href="style.css" media="screen">
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Mr Bid</title>

</head>
<div class="body1">

<ul class="social"><img src="images/facebook.png"></ul>
<ul class="social2"><img src="images/twitter.png"></ul>
<ul class="social3"><img src="images/google.png"></ul>
<ul class="social4"><img src="images/rss.png"></ul>

<ul class="Nav"> <a href="#" target="_self">FACILITY</a></ul>
<ul class="Nav2"><a href="#" target="_self">24 HOUR EMERGANCY SERVICES</a></ul>
<ul class="Nav3"><a href="#" target="_self">GENERAL CONSTRUCTION</a></ul>
<ul class="Nav4"><a href="#" target="_self">HANDYMAN SERVICES</a></ul>
<ul class="Nav5"><a href="#" target="_self">REMODELING</a></ul>



</div>
</body>
</html>

Open in new window

0
 
LVL 52

Expert Comment

by:Scott Fell, EE MVE
ID: 40008849
I pasted your code into jsbin to see what is going on http://jsbin.com/kidos/1/edit?html,css,output

Based on this sample, what is the issue?  Perhaps you can upload your images here so we can  see everything.

Also, your ul tags should have an li.

<ul>
     <li>stuff here</li>
</ul>

Otherwise, just use div's instead of ul's.
0
 

Author Comment

by:sparker1970
ID: 40008869
I created an account under jsbin but  I am not able to see anything with the URL you posted. Is there a specific way I can look at what you posted in jsbin? I have attached all the images related to the file. Here is a website I posted it on. You can see the letter move and do not "stick" to the background when re sizing. I cant figure out what to use in order to space out my css navigation words to have them all show on the grey navigation background bar and not move. Here is the site, thank you:
http://doeringdesign.com/MrBid2/
all.bmp
facebook.png
google.png
rss.png
twitter.png
bg.jpg
index.jpg
0
 
LVL 52

Expert Comment

by:Scott Fell, EE MVE
ID: 40008958
I have updated it with your images.  The edit url is http://jsbin.com/kidos/1/edit and the view only url is http://jsbin.com/kidos/1/

After I did a few fix's  http://jsbin.com/kidos/2/ and the code is below.  Note: I have used the image  you uploaded instead of your actual location.  Make sure you change the image location on your own site.

The main fix's I applied
1) The position should be relative and not abosolute
2) Applied fixed width
3) Made left and right columns

This is a basic sample to get you going.  A more traditional way to make lists using UL and LI tags.  This old site has very basic and easy samples for non drop down lists http://css.maxdesign.com.au/listamatic2/index.htm

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<link rel="stylesheet" type="text/css" href="http://doeringdesign.com/MrBid2/reset.css" media="screen">
<!-- <link rel="stylesheet" type="text/css" href="style.css" media="screen"> SEE CSS TAB-->
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Mr Bid</title>

</head>
<div class="body1">

<div class="social"><img src="http://filedb.experts-exchange.com/incoming/2014/04_w16/845742/facebook.png">
<img src="http://filedb.experts-exchange.com/incoming/2014/04_w16/845745/twitter.png">
<img src="http://filedb.experts-exchange.com/incoming/2014/04_w16/845743/google.png">
<img src="http://filedb.experts-exchange.com/incoming/2014/04_w16/845744/rss.png"></div>

<div class="Nav"> 
  <a href="#" target="_self">FACILITY</a>
  <a href="#" target="_self">24 HOUR EMERGANCY SERVICES</a>
  <a href="#" target="_self">GENERAL CONSTRUCTION</a>
  <a href="#" target="_self">HANDYMAN SERVICES</a>
  <a href="#" target="_self">REMODELING</a>
</div>
<div class="main_content">
  <!-- PUT ALL CONTENT HERE -->
  <div class="left">LEFT</div>
  <div class="rigiht">RIGHT</div>
  
  </div>


</div>
</body>
</html>

Open in new window

body {background:url(http://filedb.experts-exchange.com/incoming/2014/04_w16/845746/bg.jpg) repeat;
  border:0;
  font:14px Arial, Helvetica, sans-serif;color:#363636;
  padding:0px; 
}

body, html {height:100%}

.body1 {
  background:url(http://filedb.experts-exchange.com/incoming/2014/04_w16/845747/index.jpg) center center no-repeat;
  height:1000px;
  width:1000px;
  margin-left:auto;
  margin-right:auto;
}



a:link {color:white; text-decoration:none;} /* unvisited link */
a:visited {color:white;}
a:hover {color:yellow; text-decoration:none;}  /* mouse over link */
a:active {color:yelow; text-decoration:none;}  /* selected link */


div.social
{
/*position:absolute;
right:350px;
top:0px;
  */
  float:right;
  margin-right:10px;
}

/*
.social2
{
position:absolute;
right:295px;
top:0px;
}

.social3
{
position:absolute;
right:240px;
top:0px;
}

.social4
{
position:absolute;
right:185px;
top:0px;
}
*/
div.Nav
{
    
	text-align:center;
    padding-top:170px;
  
  
  /*
  margin:0px auto;
	padding:168px;
	margin-left:-900px;
  */
font:15px Arial;
font-weight: bold;
color:white;

}
.Nav a{
    padding-left:10px;
  padding-right:10px;
}
/*
.Nav2
{
position:absolute;
left:170px;
top:168px;
font:15px Arial;
font-weight: bold;
color:white;
}

.Nav3
{
position:absolute;
left:460px;
top:168px;
font:15px Arial;
font-weight: bold;
color:white;
}

.Nav4
{
position:absolute;
Right:250px;
top:168px;
font:15px Arial;
font-weight: bold;
color:white;
}

.Nav5
{
position:absolute;
right:90px;
top:168px;
font:15px Arial;
font-weight: bold;
color:white;
}
*/
.main_content{
  margin-top:50px;

  
}
.left{
  float:left;
  padding-left:10px;
  width:750px;
}

Open in new window

0
How your wiki can always stay up-to-date

Quip doubles as a “living” wiki and a project management tool that evolves with your organization. As you finish projects in Quip, the work remains, easily accessible to all team members, new and old.
- Increase transparency
- Onboard new hires faster
- Access from mobile/offline

 

Author Comment

by:sparker1970
ID: 40008972
Does the same rules as you have apply when I want to place data in the white part for content and/or the left part of the page that are not a list/navigation?  Thank you so much!
0
 
LVL 52

Expert Comment

by:Scott Fell, EE MVE
ID: 40009019
The main content area should primarily be text.   You would wrap paragraphs in P tags

I think you took a break and spent several hours going over basic html and css http://www.codecademy.com/learn you will save your many hours down the road.
0
 

Author Comment

by:sparker1970
ID: 40009263
Everything looks great, the only thing is the "right" side.

Once I type it goes under the text on the left even with using <p>.

Is there a way to make that right side its own content floating just on the right side of the page?
0
 
LVL 52

Accepted Solution

by:
Scott Fell,  EE MVE earned 500 total points
ID: 40009316
Since your layout is fixed both in width and height, just add height to the left.

http://jsbin.com/kidos/4

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<link rel="stylesheet" type="text/css" href="http://doeringdesign.com/MrBid2/reset.css" media="screen">
<!-- <link rel="stylesheet" type="text/css" href="style.css" media="screen"> SEE CSS TAB-->
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Mr Bid</title>

</head>
<div class="body1">

<div class="social"><img src="http://filedb.experts-exchange.com/incoming/2014/04_w16/845742/facebook.png">
<img src="http://filedb.experts-exchange.com/incoming/2014/04_w16/845745/twitter.png">
<img src="http://filedb.experts-exchange.com/incoming/2014/04_w16/845743/google.png">
<img src="http://filedb.experts-exchange.com/incoming/2014/04_w16/845744/rss.png"></div>

<div class="Nav"> 
  <a href="#" target="_self">FACILITY</a>
  <a href="#" target="_self">24 HOUR EMERGANCY SERVICES</a>
  <a href="#" target="_self">GENERAL CONSTRUCTION</a>
  <a href="#" target="_self">HANDYMAN SERVICES</a>
  <a href="#" target="_self">REMODELING</a>
</div>
<div class="main_content">
  <!-- PUT ALL CONTENT HERE -->
  <div class="left"><p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec quam felis, ultricies nec, pellentesque eu, pretium quis, sem. Nulla consequat massa quis enim.</p></div>
  <div class="rigiht"><p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec quam felis, ultricies nec, pellentesque eu, pretium quis, sem. Nulla consequat massa quis enim.</p>

<p>Donec pede justo, fringilla vel, aliquet nec, vulputate eget, arcu. In enim justo, rhoncus ut, imperdiet a, venenatis vitae, justo. Nullam dictum felis eu pede mollis pretium. Integer tincidunt. Cras dapibus. Vivamus elementum semper nisi. Aenean vulputate eleifend tellus.</p>

<p>Aenean leo ligula, porttitor eu, consequat vitae, eleifend ac, enim. Aliquam lorem ante, dapibus in, viverra quis, feugiat a, tellus. Phasellus viverra nulla ut metus varius laoreet. Quisque rutrum. Aenean imperdiet. Etiam ultricies nisi vel augue. Curabitur ullamcorper ultricies nisi.</p>

<p>Nam eget dui. Etiam rhoncus. Maecenas tempus, tellus eget condimentum rhoncus, sem quam semper libero, sit amet adipiscing sem neque sed ipsum. Nam quam nunc, blandit vel, luctus</p></div>
  
  </div>


</div>
</body>
</html>

Open in new window

body {background:url(http://filedb.experts-exchange.com/incoming/2014/04_w16/845746/bg.jpg) repeat;
  border:0;
  font:14px Arial, Helvetica, sans-serif;color:#363636;
  padding:0px; 
}

body, html {height:100%}

.body1 {
  background:url(http://filedb.experts-exchange.com/incoming/2014/04_w16/845747/index.jpg) center center no-repeat;
  height:1000px;
  width:1000px;
  margin-left:auto;
  margin-right:auto;
}



a:link {color:white; text-decoration:none;} /* unvisited link */
a:visited {color:white;}
a:hover {color:yellow; text-decoration:none;}  /* mouse over link */
a:active {color:yelow; text-decoration:none;}  /* selected link */


div.social
{
/*position:absolute;
right:350px;
top:0px;
  */
  float:right;
  margin-right:10px;
}

/*
.social2
{
position:absolute;
right:295px;
top:0px;
}

.social3
{
position:absolute;
right:240px;
top:0px;
}

.social4
{
position:absolute;
right:185px;
top:0px;
}
*/
div.Nav
{
    
	text-align:center;
    padding-top:170px;
  
  
  /*
  margin:0px auto;
	padding:168px;
	margin-left:-900px;
  */
font:15px Arial;
font-weight: bold;
color:white;

}
.Nav a{
    padding-left:10px;
  padding-right:10px;
}
/*
.Nav2
{
position:absolute;
left:170px;
top:168px;
font:15px Arial;
font-weight: bold;
color:white;
}

.Nav3
{
position:absolute;
left:460px;
top:168px;
font:15px Arial;
font-weight: bold;
color:white;
}

.Nav4
{
position:absolute;
Right:250px;
top:168px;
font:15px Arial;
font-weight: bold;
color:white;
}

.Nav5
{
position:absolute;
right:90px;
top:168px;
font:15px Arial;
font-weight: bold;
color:white;
}
*/
.main_content{
  margin-top:50px;

  
}
.left{
  float:left;
  padding-left:10px;
  width:700px;
  margin-right:50px;
  height:800px;
}

Open in new window

0
 

Author Comment

by:sparker1970
ID: 40012584
2 quick follow ups...

1. I noticed in the HTML the that is being called for the right aligned text is “rigiht”.  Where is this in the actual CSS file in case I wanted to move the padding or margin a bit? I only see “Left”  

2. Also if I wanted to say put a footer in there or maybe even a 3rd row so a left, center, right. What you would the CSS items be for that in relation to what I already have?

Thanks in advance...
0
 
LVL 52

Expert Comment

by:Scott Fell, EE MVE
ID: 40012621
"rigiht" was just a fat finger slip. But it is not used in the css.

If you want to add a footer div, add it after the the closing div for <div class="body1">.  You will have to make sure the height for the div's above is correct to match your background.

Otherwise, keep adding divs inside the left or right divs.  

Since you have a fixed background, you have to carefully watch your heights and the amount of content you place on each page.

I think this has answered your basic question about the menu and a bit beyond.

This method of creating a page is old school and not very optimal.  You could achieve this same thing using all css with no background image except for the texture. The only images you really need are the license plate for mr bid and the social icons.  You want to allow for multiple screen widths.  Currently there are literally 1000 options when you include mobile phones to large 2000px monitors.

I do think you will benefit by getting back to fundamentals and spend the day on http://www.codecademy.com/learn going over html and css.   A one day time out will save you months of frustration.  

To deal with multiple viewports, I like to use a responsive grid as a base such as http://getbootstrap.com/ or http://foundation.zurb.com/.  Both projects have project samples to get you started.  They will be a bit more to code, but in the end a better experience for your users.
0
 

Author Closing Comment

by:sparker1970
ID: 40013193
Everything worked perfectly. Thanks for the patience and assistance!
0

Featured Post

What Should I Do With This Threat Intelligence?

Are you wondering if you actually need threat intelligence? The answer is yes. We explain the basics for creating useful threat intelligence.

Join & Write a Comment

Suggested Solutions

Title # Comments Views Activity
Dreamweaver server behavior gone 6 75
sumHeights2  challenge 7 78
VB 6.0 printer how to align 6 49
Magic Software info 18 105
This is an explanation of a simple data model to help parse a JSON feed
In order to have all security and back ups taken care of, WordPress users can sign up for services with WP Engine.
An introduction to basic programming syntax in Java by creating a simple program. Viewers can follow the tutorial as they create their first class in Java. Definitions and explanations about each element are given to help prepare viewers for future …
In this fifth video of the Xpdf series, we discuss and demonstrate the PDFdetach utility, which is able to list and, more importantly, extract attachments that are embedded in PDF files. It does this via a command line interface, making it suitable …

760 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question

Need Help in Real-Time?

Connect with top rated Experts

18 Experts available now in Live!

Get 1:1 Help Now