Tek-Tips is the largest IT community on the Internet today!

Members share and learn making Tek-Tips Forums the best source of peer-reviewed technical information on the Internet!

Register Log in
  • Congratulations Chris Miller on being selected by the Tek-Tips community for having the most helpful posts in the forums last week. Way to Go!

CSS Utah shapes stacked

Status
Not open for further replies.
kellan4459

kellan4459

IS-IT--Management
Jul 3, 2003
84
US
I am trying to create a page that will fill in the inner square with information, images, and links. What I have is a main div that contains a rowdiv. The rowdiv has a left div that has a short paragraph, then a rightdiv that contains to addiv's that are stacked. The addiv's are a little bit longer than the leftdiv which is fine. I then tried to add another div below that that has a picture with some text wrapped to the right and below the image. I would like for this to either fill in around the above divs or simply sit below the rowdiv above it. The bottom div is cased inside of the maindiv but when I add a border the bottom div is filling the whole maindiv and not aligning below the other encased div's. Is there a way to stack two outer divs that are shaped like the state of Utah or am I forced to stack them as squares? And if the latter is true why isn't the bottom div aligning sequentually with the others encased in the main div?
 
Sort by date Sort by votes
Just to add a little to it. The two are stacked as desired in Internet Explorer, but not Firefox (which I work in 95% of the time)
 
Upvote 0 Downvote
I am new and trying to get away from Tables. I have the following sample on a local server so I can't get you the images but this is my design. I'm sure there is probably more optimal ways that I have not learned but I'm trying to get the experience by doing and getting feedback when stuck.

!!!WEBSITE CODE!!!
<HTML>
<HEAD>
<TITLE>BPFK</TITLE>
<META HTTP-EQUIV="Content-Type" CONTENT="text/html; charset=iso-8859-1">
<link href="bpfkstyle.css" rel="stylesheet" type="text/css">
</HEAD>
<BODY>

<div id="floatdiv" class="navigationbar">

<div class="navigationimage"><img src="images/bouncersmall.jpg"></div>
<div class="navigationtext">Home</div><div class="navigationimage"><img src="images/bouncersmall.jpg"></div>
<div class="navigationtext">About Us</div><div class="navigationimage"><img src="images/bouncersmall.jpg"></div>
<div class="navigationtext">Classes</div><div class="navigationimage"><img src="images/bouncersmall.jpg"></div>
<div class="navigationtext">Register</div><div class="navigationimage"><img src="images/bouncersmall.jpg"></div>
<div class="navigationtext">Contact Us</div><div class="navigationimage"><img src="images/bouncersmall.jpg"></div>

</div> <!-- end of navigationbar -->
<script src="floatingmenu.js" type="text/javascript" language="javascript"></script>

<div class="outsidecontainer">
<div class="navigationcontainer">

</div> <!-- end of navigationcontainer -->

<div class="logocontainer">
</div> <!-- end of logocontainer -->

<div class="bodycontainer">
<div class="bodycontainer">
<div class="indexheader"><img src="images/indexheader.jpg"></div> <!-- end of indexheader -->


<div class="introwithadscontainer">
<div class="leftcontentcontainer">
<font face="Kristen ITC,Comic Sans MS,Verdana" size="2" color="#000080">
This will be the intro text that will take up several lines. It may end up shorter than the ad links on the right but that is ok.
<p>
This will be a welcome paragraph that is included with the above introduction
<p>
</div> <!-- end of leftcontentcontainer -->
<div class="rightadcontainer">
<div class="corporatecontainer"><a href=" src="images/corporate.jpg"></a></div> <!-- end of corporatecontainer -->
<div class="newslettercontainer"><a href="newsletter.php"><img src="images/newsletter.jpg"></a></div> <!-- end of newletercontainer -->
</div> <!-- end of rightadcontainer -->

<div class="rightcontentcontainer">
<img src="images/dogblank.gif" alt="" width="400" height="295" border="0" align="left" usemap="#dogblank_Map">
<map name="dogblank_Map">
<area shape="rect" alt="" coords="189,130,309,156" href="afternooncamp.pdf">
<area shape="rect" alt="" coords="125,187,287,213" href="etiquette.pdf">
<area shape="rect" alt="" coords="189,93,317,122" href="character_2.pdf">
<area shape="rect" alt="" coords="150,41,284,75" href="summer_events08.pdf">

</map>
What we offer:<p><ol>
<LI><strong><font color="#FF0000">
Classes:</font></strong>
<ul><LI><strong>BPFK</strong> Classes - This will be the introduction to class number 1 and what is provided with it.<p>
This paragraph will discuss the disclosures for this class<p>

<LI><strong>BPFK</strong> Classes - This will be the introduction to class number 1 and what is provided with it.<p>
This paragraph will discuss the disclosures for this class<p>
</ul>

<LI> Other
<p>
<LI><strong> Class </strong> - This will be another description</ol><p>
</div> <!-- end of rightcontentcontainer -->
</div> <!-- end of introwithaddscontainer -->
</div> <!-- end of bodycontainer -->
</div> <!-- end of bodycontainer -->

<div class="footercontainer">
</div> <!-- end of footercontainer -->
</div> <!-- end of outsidecontainer -->
</BODY>

</HTML>


!!!STYLESHEET!!!
.outsidecontainer {
background-image: url(images/background.jpg);
background-repeat: repeat-y;
text-align: center;
margin: 0px;
padding: 0%;
}
body {
margin: 0px;
padding: 0px;
}
.navigationcontainer {
margin: 0px;
padding: 0px 255px 0px 242px;
background-image: url(images/navigation.jpg);
font-family: "Times New Roman", Times, serif;
font-size: 12px;
color: #FFFFFF;
font-weight: bold;
vertical-align: middle;
border: none #00FF00;
height: 24px;
text-align: center;
}

.navigationbar {
margin: 0px;
height: 24px;
position:absolute;
padding:0px 0px 0px 250px;
background:url(images/navigation.jpg);
width: 1263px;
text-align: center;
}

.logocontainer {
margin: 0px;
padding: 0px;
background-image: url(images/logo.jpg);
height: 189px;
width: 1263px;
}
.footercontainer {
margin: 0px;
padding: 0px;
background-image: url(images/footer.jpg);
height: 104px;
width: 1263px;
}
.navigationimage {
float: left;
text-align: center;
font-family: "Times New Roman", Times, serif;
font-size: 16px;
font-weight: bold;
color: #ffffff;
height: 24px;
line-height: 24px;
vertical-align: middle;
display: table-cell;
padding-right: 4px;
padding-left: 4px;
}
.navigationtext {
float: left;
text-align: center;
font-family: "Times New Roman", Times, serif;
font-size: 14px;
font-weight: bold;
color: #ffffff;
height: 24px;
line-height: 24px;
vertical-align: middle;
}
.leftcontentcontainer {
float: left;
width: 450px;
}
.rightcontentcontainer {
padding-right: 10px;
padding-left: 10px;
width: 700px;
}
.corporatecontainer {
border: 2px solid #000000;
float: right;
width: 250px;
clear: right;
height: 100px;
margin: 2px;
}
.newslettercontainer {
border: 2px solid #000000;
float: right;
width: 250px;
clear: right;
height: 100px;
margin: 2px;
}
.introwithadscontainer {
padding-right: 260px;
padding-left: 260px;
}
.bodycontainer {
text-align: center;
}
.rightadcontainer {
float: right;
width: 250px;
}
 
Upvote 0 Downvote
am i too div happy? looking at other examples I think I may be.
 
Upvote 0 Downvote
I think you're using too many classes -- try using dependencies instead. This way you would define blocks of your site (either with ids -- for blocks that appear only once on the page or with classes -- for blocks that appear multiple times) and you would style all the elements within a particular block. This would look something like this:
CSS: 
#header { ... }
#header h1 { ... }
#header p { ... }
#header a { ... }
HTML: 
<div id="header">
 <h1>Title</h1>
 <p>Our slogan -- <a href="#">link</a></p>
</div>
This produces much cleaner HTML document.

Additionally, you should use more semantic HTML. Divs are just unnamed blocks. Think of lists (navigation list), paragraphs, headings and other semantic elements that you could be using instead. Finally, get rid of font tags. Presentational layer should be left to CSS.

___________________________________________________________
[small]Do something about world cancer today: Comprehensive cancer control information at PACT[/small]
 
Upvote 0 Downvote
Thanks, that was kind of what I suspected the more I read about CSS.
 
Upvote 0 Downvote
Status
Not open for further replies.

Similar threads

jizzer
  • Locked
  • Question
HTML/CSS Image map with multiple tool-tips
Replies
3
Views
1K
spamjim
spamjim
Expoverse
  • Locked
  • Helpful tip
Solution to CSS Two Level Horizonal Menu 1
Replies
1
Views
736
pmonett
pmonett
PeDa
  • Locked
  • Question
CSS two level horizontal menu
Replies
0
Views
589
PeDa
PeDa
PeDa
  • Locked
  • Question
Horizontal rule and CSS problem 2
Replies
2
Views
625
PeDa
PeDa
tyutghf
  • Locked
  • Question
Achieving this grid layout in css
Replies
1
Views
204
tyutghf
tyutghf

Part and Inventory Search

Sponsor

Back
Top