css problem

justinh · December 18, 2008

Okay let me give you the code first before i explain:

heres a link to see the problem ( http://www.wmptest.com/stbs/new/index.html )

style4.css

 
body {
background-color:#369;
}

#container {
width:800px;
height:600px;
border:3px #000 solid;
background-color:#FFF;
margin-left:auto;
margin-right:auto;
margin-top:10px;
padding:5px;
}

p.text {
font-size:12px;
font-family:verdana;
}

img {
margin-left:25px;
}

form.formpractice fieldset {
margin-bottom:10px;
width:200px;
background-image:url(formbackground.gif);
height:85px;
margin-left:auto;
margin-right:auto;
}

form.formpractice legend {
font-family:arial;
font-size:14px;
background-color:#FFF;
margin:0 2px;
}

form.formpractice label {
display:0;
line-height:1.8;
width:80px;
font-family:arial;
text-align:right;
margin-right:5px;
font-size:14px;
color:#000;
}

form.formpractice ol {
margin:0;
padding:0;
}

form.formpractice li {
list-style:none;
}

form.formpractice fieldset input {
background-image:url(testing.gif);
color:#FFF;
font-family:arial;
border:1px #000 solid;
}

form.formpractice fieldset input:focus {
border:1px red solid;
}

input.submit {
margin-left:174px;
margin-right:5px;
background-color:#FFF;
border:1px #000 solid;
display:block;
margin-top:5px;
color:#000;
}

p.copyright {
margin-top:50px;
margin-left:auto;
margin-right:auto;
width:300px;
text-align:center;
font-family:arial;
font-size:9px;
}

p.copyright2 {
margin-top:86px;
margin-left:auto;
margin-right:auto;
width:300px;
text-align:center;
font-family:arial;
font-size:9px;
}

#rowset1 {
width:600px;
height:170px;
border:1px #F3EDED solid;
margin-left:auto;
margin-right:auto;
}

#link1 {
border:1px #F3EDED solid;
width:200px;
height:150px;
text-align:center;
padding-left:10px;
padding-right:10px;
margin:10px;
}
#link2 {
border:1px #F3EDED solid;
width:200px;
height:150px;
text-align:center;
padding-left:10px;
padding-right:10px;
margin:10px;
}


img.upload {
margin-right:20px;
margin-left:15px;
}

p.linktitle {
font-family:arial;
font-size:20px;
}

most of this is not being used yet

but here is the html

index.html

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
  <html>
   <head>
    <title>South Texas Business System's - Upload Manager</title>
     <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
      <link rel="stylesheet" type="text/css" href="style4.css" />
   </head>
   <body>
   <div id="container">
   <img src="logo2.jpg"></img>
   <div id="rowset1">
   <div id="link1"><img src="load.png" class="upload"></img></div> testing
   <div id="link2"><img src="profile.png" class="upload"></img></div>
   </div>
   </div>
   </body>
   </html>

Now, div link1 is showing up inside div rowset1, but the text "testing" and then div link2 is showing outside of rowset1.. although it is coded to be inside of it.. im really frustrated =(

Any help would be great. thanks

Philip · December 19, 2008

Well,

#rowset1 {
width:600px;
height:170px;
border:1px #F3EDED solid;
margin-left:auto;
margin-right:auto;
}

#link1 {
border:1px #F3EDED solid;
width:200px;
height:150px;
text-align:center;
padding-left:10px;
padding-right:10px;
margin:10px;
}

Did you want them next to each other correct?

If not - your heights for the row is 170 and then for link1 is 150.

If so - take a look at using a float in that case.

dbrimlow · December 19, 2008

First - KingPhilip was right ... you want to use floats.

Second - avoid "divitus". Divs are just html block place holders, not replacement for tags meant to contain text .... use proper html tags to contain text (paragraph, headings, lists) instead of dropping so many divs?

Use divs to contain "sections or blocks of html tags in an orderly logical way to provide the general layout for those sections/blocks.

Third - be careful, if you want to use the xhtml doctype ... LEARN THE STRICT RULES! Otherwise use html 4.01 instead.

In xhtml you "self close" your img tags by simply adding a closing slash at the end of the tag itself, instead of adding </img> - eg: <img src="load.png" class="upload" />

Also in xhtml you MUST add an "alt tag" - alt="image alternative". The alt tag is meant to perform the same function as when the image is either turned off, the visitor is using a text browser, the image src path is wrong or the image is not available. Don't just describe the image (eg: alt="graphic of floppy disk"), describe it's purpose (upload file). Imagine the image gone and what text needs to show to guide the visitor - if a link show the path, if a photo of someone alt="picture of Joe Brown", etc.

Keep your code simple.

Note how I replaced the <div id="link1"> and <div id="link2"> tags with <p id="link1"> and <p id="link2">; and how I self closed your image tags.

Also, remove the inline styles I used "style="margin:.25em 0 0 0;float:left" - and add "margin:.25em 0 0 0;float:left" to .upload class.

Copy and paste this into notepad, and save in your folder as test.html (in order to use the same css and graphics).

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" 
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head>
<title>South Texas Business System's - Upload Manager</title>
     <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
      <link rel="stylesheet" type="text/css" href="index_files/style4.css">
</head>
<body>
   <div id="container">
   <img src="index_files/logo2.jpg" />
   <div id="rowset1">
      <p id="link1"  style="float:left"><img src="load.png" class="upload" 
style="margin:.25em 0 0 0; float:left" />testing</p> 
   <p id="link2"  style="float:left"><img src="profile.png" class="upload" 
style="margin:.25em 0 0 0;float:left"  />testing</p>
   </div>
   </div>
   </body>
</html>

Sign In

css problem

Recommended Posts

justinh

Link to comment

Share on other sites

Philip

Link to comment

Share on other sites

dbrimlow

Link to comment

Share on other sites

Join the conversation

Browse

Activity

Important Information