Solved

CSS HTML Text Alignment

Posted on 2014-04-17
13
418 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
Is Your Active Directory as Secure as You Think?

More than 75% of all records are compromised because of the loss or theft of a privileged credential. Experts have been exploring Active Directory infrastructure to identify key threats and establish best practices for keeping data safe. Attend this month’s webinar to learn more.

 

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

Is Your Active Directory as Secure as You Think?

More than 75% of all records are compromised because of the loss or theft of a privileged credential. Experts have been exploring Active Directory infrastructure to identify key threats and establish best practices for keeping data safe. Attend this month’s webinar to learn more.

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

Suggested Solutions

Title # Comments Views Activity
topping1 challenge 7 73
tidtcpserver connection lost handle 2 71
Full Screen problem when auto scale IFRAME 2 65
Is doing tutor.com teaching in my situation advisable? 2 54
Go is an acronym of golang, is a programming language developed Google in 2007. Go is a new language that is mostly in the C family, with significant input from Pascal/Modula/Oberon family. Hence Go arisen as low-level language with fast compilation…
Since upgrading to Office 2013 or higher installing the Smart Indenter addin will fail. This article will explain how to install it so it will work regardless of the Office version installed.
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 …
In this seventh video of the Xpdf series, we discuss and demonstrate the PDFfonts utility, which lists all the fonts used in a PDF file. It does this via a command line interface, making it suitable for use in programs, scripts, batch files — any pl…

920 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