|
CSS - Spreading Text Horizontally Accross A Div
I haven't been able to find an answer to this anywhere and am hoping someone here can help.
I'm trying to space the text inside my navigation div so that it stretches evenly accross the div rather than being centered and having a bunch of space on either side. Here's my current html... Code: <div id="navigation"> <p class="nav"><font color="#ffffff" face="verdana" size="3"> <img align="center" border="0" width="1" height="2" src="navdot.gif"><br /> Link 1 | Link 2 | Link 3 | Link 4 | Link 5 </font></p> </div> And my css... Code: #navigation {
width:750px;
height:30px;
background-image:url('navigation.gif');
background-repeat:no-repeat;
margin-top:0px;
}
Any help would be much appreciated. Thanks! EDIT: I think I got it figured out... well, it looks good on my end and I checked it across 6 larger browsers anyways. Here's the html now... Code: <div id="navigation"> <img align="center" border="0" width="1" height="2" src="navdot.gif"> <table align="center" border="0" width="750"> <tr><td width="150" valign="top"> <center><font color="#ffffff" face="verdana" size="3">Link 1</font></center> </td><td width="150" valign="top"> <center><font color="#ffffff" face="verdana" size="3">Link 2</font></center> </td><td width="150" valign="top"> <center><font color="#ffffff" face="verdana" size="3">Link 3</font></center> </td><td width="150" valign="top"> <center><font color="#ffffff" face="verdana" size="3">Link 4</font></center> </td><td width="150" valign="top"> <center><font color="#ffffff" face="verdana" size="3">Link 5</font></center> </td></tr></table> </div> I used a 1x2px image to lower the text so it wasn't sitting right up against the top of the div, then I used a table inside of it and text without using paragraph tags. There's gotta be a cleaner way of doing this though, isn't there? It looks great cross-browser, but I'm thinking there's gotta be a way to do this without a table. Similar Tutorialsthis should be simple, but im just not finding my answer. im trying to figure out how to evenly spread several links across a fixed width. i could manually set the padding or margins for each link, but i figure there has to be a way to do it in css automagically. I know vertical-align works great on one line of text, but I can't get this script to vertically (and horizontally) center two lines of text. What do I need to do change without changing the size of the div? Code: echo '<div style="float:left;width:171px;height:96px;text-align:center;display:table-cell;vertical-align:text-middle;background-color:yellow;">'; echo '<h1 >1/35 Scale House</h1>'; echo '</div>'; hi, is it possible to have a bg in a cell only to go half way accross the cell? How do I spread the elements of an unordered list so they stretch across the page? This isn't all the code, but definitely all the important parts. I used the HTML to center it, since there's no way to center them in CSS (that I know of) and I tried percentages and such for borders, margins or padding. None of it works, since it's all pertaining to list items. I have no idea what to do with this. HTML Code: <div id="nav"> <center> <ul> <li><a href="#">1</a></li> <li><a href="#">2</a></li> <li><a href="#">3</a></li> <li><a href="#">4</a></li> <li><a href="#">5</a></li> <li><a href="#">6</a></li> </ul> </center> </div> <!--Close #nav--> CSS: Code:
#nav {
text-shadow:#000 0.2em 0.2em 0.2em;
position:relative;
width:100%;
display:block;
border: .1em solid #FFF;
background-color:#000;
}
#nav ul {
list-style-type:none;
margin:0;
padding:0;
}
#nav ul li {
display:inline;
}
#nav a {
color: white;
padding: 0 .5em;
text-decoration: none;
/* border: .1em solid #FFF;*/
}
#nav a:hover {
background-color: #333;
color: red;
}
Im new to CSS but can some one advise how i spread my image across a who page? At present once i have designed my web page in photoshop and flash i'am struggling to spread the image across my web browser. I seem to be having a gap to my left and right once i centre my image. having trouble centering a web site what i want to precisely position elements in my site and i thought that i could put all the elements in to one div tag and make that centered. i can center it but the problem is when the browser is resized smaller that the content the site remains centered and center starts diserpering off the left edge. what i want it to do once resized smaller is for a horizontal scroll bar to appear and for content not to disappear on the left edge of the screen. i have half achieved this but now my content dose not stay in the main div check out my example the "center1" div should appear inside the top light gray box but it dose not! http://www.thehopeandanchor.net/nypd/layertest.htm the code: <!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" xml:lang="en" lang="en"> <head> <title>redeem file</title> <style type="text/css"> <!-- div#center1 { /*position:absolute;*/ margin:0px auto; top:10px; width:600px; height:47px; background-color: #cccccc; } div#center2 { position:absolute; left: 50%; margin-left: -300px; top:80px; width:600px; height:47px; background-color: #cccccc; } div#insidebit { position:absolute; left:50px; top:10px; width:64px; height:26px; background-color: #eeeeee; } --> </style> </head> <body> <div id="center1"> <div id="insidebit">center1</div> </div> <div id="center2"> <div id="insidebit">center2</div> </div> </body> </html> Hi I want to show database information with php for different items using <div> tags in manner that each run of the loop display three div in a row (horizontally) and then start a new row if more data is available, each div should show a thin border around it. for this I have written the following code PHP Code: while($row=mysql_fetch_array($res)( { ?> <div text-align: center; padding: 0px 0px 0px 0px; margin: 0px 0px 0px 0px;> <?php echo "item id: " . $var . "<br>"; echo "price: " . $var . "<br>"; echo "dealer: " . $var . "<br>"; ?> </div> <?php } //end loop ?> but it displays each row in a new line. please visit this http://www.dev411.com/typo/themes/?pp=8;pg=5 just to see an example of what I am talking about. I wonder if anyone could help in this? thanks hi i would like to display some pictures on my site, and be able to scroll horizontally, i have simply listed the pictures in the xhtml and my css cose is below. at the moment the pictures still stack up vertically so the horizontal scroll bar cannot be used. can anyone help? thanks div.galleryscroll { height: 125px; width: 694px; position: absolute; top: 540px; left: 280px; z-index: +1; overflow-y: hidden; overflow-x: scroll; } is it possible to center something vertically inside a container without the use of tables? I know you use text-align to center horizontally, but what is used for vertical alignment? vertical-align doesn't work. PHP Code: <div style="width:100% height:100%; text-align:center;"> <!-- code goes here --> </div> thanks goran. I need help aligning the flash block to the right of my site to the one on the left so that they are both on the same line. gpostal.net is the website so you can see the flash blocks. See how one is at the bottom right? I'm trying to get that to the top right and closer to the one on the left. Hey, I've been doing a fair amount of research on centering a page vertically and horizontally with CSS, and before I begin constructing my page, I thought I'd get some input from you guys. Basically, the page is going to look like this Any advice would be greatly appreciated. Thanks! hello! i'm trying to line up some text in my unordered list but haven't been able to figure out the CSS to make it look something like this: Code: Accomplishments: Job title some job here another job yet another job Duties Designed company website. Proofread advertisements Code: <div id="resume"> <h4>Accomplishments</h4> <ul> <li>Job title</li> <ul> <li>some job here</li> <li>another job</li> <li>yet another job</li> </ul> <li>Duties:</li> <ul> <li>Designed company website.</li> <li>Proofread advertisements</li> </ul> </ul> </div> so i tried doing stuff like Code: div#resume ul li ul {
position:absolute;
top:-20px;
left:50px;
}
div#resume ul li ul li{
float:none
position:relative;
}
i can't get the words, "Job title" to line up horizontally with the first list item, then have the list items listed vertically like in my example up top (i know it doesn't line up perfectly in here) can someone correct my css?? thanks! drGiggles I'm hoping I can get a bit of help addressing the display of an unordered list. I'm trying to view the list horizontally, and not vertically. Here is the code, and thanks in advance. CSS -------------------------------- #pages { margin-top: 12px; float: right; margin-right: 125px; font: normal 14px "Century Gothic","Trebuchet MS",Arial,Helvetica,sans-serif; color: #000; } #pages ul { list-style-type: none; margin: 0; padding: .5em 0; display: inline; } #pages li a { display: block; width: 1.5em; height: 1.5em; padding: 0; text-align: center; vertical-align: text-middle; text-decoration: none; } #pages a:link, #pages a:visited { margin: 0 10px 0 10px; text-decoration: none; color: #000; } #pages a:link#pagescurrent, #pages a:visited#pagescurrent { border-bottom: 1px solid #000; background: transparent; color: #000; } #pages a:hover { background-color: #949494; color: #fff; } HTML -------------------------- <div id="pages"> <ul> <li><a href="#" id="pagescurrent" title="next slide">1</a></li> <li><a href="#" title="next slide">2</a></li> <li><a href="#" title="next slide">3</a></li> <li><a href="#" title="next slide">4</a></li> </ul> </div> I am trying to make to div tags enclosed inside another div tag align horizontally. I am trying to do this without absolute positioning. See image below Any ideas? Thank you. dear all, is it possible, using css or otherwise, to have a div on my page remian visible even when the page is scrolled hoizontally and the div goes out of view. the div in question runs vertically down the left hand side of the page. there are javascript menus i have seen that do this (albeit usually when scrolling vertically), but i wonder if it can be done with css. many thanks, mark hi. I built a flash website with a resolution of 1920x1200. The background of this web is 1920x1200 and my actual website with menu and stuff is in the middle of it with a resolution of 1024x768. How can i upload this website and in the browser to shown always the middle of the flash? I hope this is possible. thanks! I'm trying to tile a background image horizontally with a vertically tiled background image centered on the page. Being new to css and not particularly fluent in html (although more so than css), I have no idea how to go about doing this or if it is even possible. I do have both images working separately though. Help would be appreciated. -alexa I've been playing around with centering an absolutely positioned div and in this post is the method I've come up with. I've tested it in firefox and IE but am curious as to whether it works in opera and if there are better ways of doing it. The div needs to be absolutely positioned because I'm using top & bottom to set it's height. Here's the code Code:
<!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" lang="en" xml:lang="en">
<head>
<title>Center Test</title>
<style>
body
{
margin: 0px;
height: 100%;
}
.centered
{
position: absolute;
border: 2px solid black;
width: 196px;
background: orange;
margin: auto;
top: 100px;
left: 0px;
right: 0px;
bottom: 100px;
min-height: 50px;
height: expression((document.body.clientHeight < 250 ? 50 : document.body.clientHeight - 200 ) + 'px');
left: expression('auto');
right: expression(((document.body.clientWidth < 200 ? document.body.clientWidth - 200: document.body.clientWidth / 2 - 100 )) + 'px');
}
</style>
</head>
<body>
<div class='centered'>
I'm a centered absolutely positioned div.
</div>
</body>
</html>
I'm trying to position the image below vertically center and horizontally left to no avail. Its horizontally left but centers the top of the image in the center of the page. What am I doing wrong? <DIV style="position: absolute; top: 50%; left: 0px; border: none"><img src="images/right.jpg"></img></DIV> |
|||||||