• Status: Solved
  • Priority: Medium
  • Security: Public
  • Views: 485
  • Last Modified:

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
0
sparker1970
Asked:
sparker1970
  • 7
  • 6
1 Solution
 
Scott Fell, EE MVEDeveloperCommented:
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
 
sparker1970Author Commented:
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
 
sparker1970Author Commented:
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
Technology Partners: We Want Your Opinion!

We value your feedback.

Take our survey and automatically be enter to win anyone of the following:
Yeti Cooler, Amazon eGift Card, and Movie eGift Card!

 
Scott Fell, EE MVEDeveloperCommented:
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
 
sparker1970Author Commented:
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
 
Scott Fell, EE MVEDeveloperCommented:
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
 
sparker1970Author Commented:
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
 
Scott Fell, EE MVEDeveloperCommented:
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
 
sparker1970Author Commented:
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
 
Scott Fell, EE MVEDeveloperCommented:
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
 
sparker1970Author Commented:
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
 
Scott Fell, EE MVEDeveloperCommented:
"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
 
sparker1970Author Commented:
Everything worked perfectly. Thanks for the patience and assistance!
0

Featured Post

Concerto Cloud for Software Providers & ISVs

Can Concerto Cloud Services help you focus on evolving your application offerings, while delivering the best cloud experience to your customers? From DevOps to revenue models and customer support, the answer is yes!

Learn how Concerto can help you.

  • 7
  • 6
Tackle projects and never again get stuck behind a technical roadblock.
Join Now