Link to home
Start Free TrialLog in
Avatar of sparker1970
sparker1970Flag for United States of America

asked on

CSS HTML Text Alignment

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
Avatar of Scott Fell
Scott Fell
Flag of United States of America image

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/
Avatar of sparker1970

ASKER

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.
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

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.
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
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

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!
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.
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?
ASKER CERTIFIED SOLUTION
Avatar of Scott Fell
Scott Fell
Flag of United States of America image

Link to home
membership
This solution is only available to members.
To access this solution, you must be a member of Experts Exchange.
Start Free Trial
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...
"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.
Everything worked perfectly. Thanks for the patience and assistance!