PDA

Click to See Complete Forum and Search --> : nested containers dont's

jagguy
09-30-2006, 03:27 AM
I have found that doing simple horizontal displays can get messy easily.
I wanted a bar across top of screen 20px high and full screen long. There is no fullscreen command to display an element I see. I can't control 3 text elements on the bar as it is too complicated spaced on left/right/center of screen.
Instead I used an image but I have no control on far right text element on its font/size display . I only have control on 1 text element with css and not 2 on the same container.

q) Is it really dumb having more than 1 text element on a container and images are easier to handle in the same container?



div#topmenu {height:30px;
float:left;
background: lightgrey;
color: #79B30B;
width:100%;
text-align:left;

}

#topm2 {/*padding-left:100px;*/
margin-left:20%;
vertical-align:text-left;
margin-right:20%;
}



</style>



</head>
<body bgcolor="#ffffff">
<div id="topmenu">
hello


<img id="topm2" height="28" hspace="0" src="one2.jpg"
width="96" border="0">
No control on this text
</div>

</body>
</html>
WebJoel
09-30-2006, 08:49 AM
for one, this is not a valid CSS selector

vertical-align:text-left;

and does nothing.
but yes, can't get two inlines to display on same line unless you create two divs and float them against each other maybe, and style them that way. Or you could fake it and create span tags maybe, to change the appearance of the content, like

<h1 style="background-color:silver; width:710px; margin: 0 auto;">This is <span style="color:green; background-color:#bfe2f9;">Header</span> Tag <span style="font-size:0.7em; padding-left:6px; font-style:italic;">and this appears <span style="color:red; padding-left:10px; letter-spacing:0.5em;">different</span><span style="font-size:0.7em; padding-left:16px; font-style:italic;">as well.</span></span></h1>

but this header tag example doesn't address getting an image into the line though...

(edited)

MY APOLOGIES!! "vertical-align:text-left;" is a valid selector/declaration! I looked it up last night after I posted... it 'sounded familiar' despite it unusual selector-and-declaration hyphenation. That is what looked strange to me.. -Does it work though as a CSS value though? (e.g., style="" ?). -Just to wanted set the record . :o
ray326
09-30-2006, 02:01 PM
Ok I can't make much sense out of that but is what you want a banner that consists of an image between two areas of text? Is there some meaning to the two chunks of text or are they just gibberish? Got a design? Got a link?
jagguy
10-01-2006, 04:15 AM
I can get it to work with ,margins which might be the most logical. The issue was having a horizontal bar across width of screen say 10%height, all in div tags.

Now if you have 1 piece if text on left, image in center and text on the right with css styles. I can't seperate the 2 text displays as 1 takes the style of the 1st with css.
1andyw
10-01-2006, 08:28 AM
One place to find numerous list menu layouts:

List-A-Matic (http://css.maxdesign.com.au/listamatic/)

Andy
jabez
10-01-2006, 10:06 AM
Is this what your'e wanting to do?

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">

<head>
<title>Bar</title>

<style type="text/css">

body {
background-color: white;
}


#top_bar {
display: block;
position: absolute;
top: 35px;
left: 5px;
width: 98%;
height: 20px;
background: white;
text-align: center;
border: 1px red solid;
}

#text1 {
display: block;
position: absolute;
top: 3px;
left: 5px;
width: 10%;
height: 20px;
font-family: "adobe utopia";
font-size: medium;
font-size-adjust: 0.58;
font-stretch: normal;
font-style: normal;
font-variant: normal;
font-weight: bold;
}

#text2 {
display: block;
position: absolute;
top: 3px;
left: 275px;
width: 10%;
height: 20px;
font-family: "adobe utopia";
font-size: medium;
font-size-adjust: 0.58;
font-stretch: normal;
font-style: normal;
font-variant: normal;
font-weight: bold;
}

#text3 {
display: block;
position: absolute;
top: 3px;
left: 550px;
width: 10%;
height: 20px;
font-family: "adobe utopia";
font-size: medium;
font-size-adjust: 0.58;
font-stretch: normal;
font-style: normal;
font-variant: normal;
font-weight: bold;
}

</style>
</head>

<body>

<div id="top_bar">
<span id="text1">Text1</span>
<span id="text2">Text2</span>
<span id="text3">Text3</span>
</div>

</body>
</html>
Kravvitz
10-01-2006, 01:29 PM
I can't seperate the 2 text displays as 1 takes the style of the 1st with css.
Could you show us what you mean by that?