|
CSS - Spreading Text Across A Fixed Width
this 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.
Similar TutorialsI 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. Hi, I have hit the "wall" in my knowledge of CSS while trying to implement a "flex-width-equal-height-sidebar-layout" style of layout as a skin/theme for a message board system and need some help. My trouble occurs when a direct link to the post is used (instead of following the menu navigation system) where the top menu information/links area (the area between the banner and the post) is chopped off... The relevant portion of the CSS seems to be the .col_wrap {margin-top: 10px; border: 0; overflow: hidden; float: left; width: 100%; position: relative; z-index: 10; clear: both;} portion of my CSS because if I take out the overflow:hidden declaration then the menu portion of the skin/theme/layout shows correctly but the sidebar the shows the part which should be hidden at the bottom and the footer completely vanishes from view! My apologies but this is the best I can do without having the ability to post pics or urls which could better explain what is wrong and frankly speaking I don't know how anyone here can help given my inability to show the problem but hopefully someone knows or has run into this problem before or can offer some resources that may be of assistance.... i ve been playing with my page and been trying to modify the width of the page (divs) according to the browswer's width. The problem is i want the navigation menu on left to be fixed width (say 200px) and the center div and the right column to be variable width. Also, i want to set a minimum width , so that the floating divs dont roll below the navigation menu. here s the link to the page. try reducing ur browser windows size . the content div rolls down under theleft nav menu. http://ccc.1asphost.com/pacemakerpr...r/cicuitlab.htm Also , i get wierd result in netscape navigator. please help I have seen a design which I find pretty interesting where in the main site is aligned left and fixed width at say 700px wide. Yet the footer seems to span the entire screen. The header also seems to use the entire screen width but that is beign accomplished with the background image, but this footer goes all the way to end of the screen and naturally adjusts itself under all the content. Is there a way to get this effect? I'm at the very very very begaining of a table-less design (my first, actually). The problem is, since I have decided to have a non-fixed width, when the browser is minimized, at a certain point the design breaks. See it here (please don't make fun! it's just the start): SiliconSatan.com/test.php I'd like to set a minimum width, probably on the container <div>, so at a certain point it sort of becomes like a fixed width? No smaller than a set width? [EDIT] Also, I have a question about background color mismatch, but it was not quite OT for the CSS forum: http://forums.devshed.com/web-desig...e7t-403266.html Pretty much what the title says, is it possible to center a div in the middle of the screen without giving it a fixed width? Hi, this is my first post. I have a problem with the navigation bar on a site that I'm developing (musicboxtheatre.com). It renders properly in firefox and safari, but, of course, IE is causing problems. It renders as steps. The tabs are dropping vertically so that their tops are aligning with the bottom of the previous tabs line-height. Does anyone know of a solution? Update: I rewrote everything, and it somehow works now. Nevermind. I cant get the side menu (colored in red at the moment...will eventually be white like the rest) to overflow: auto with 100% height....i know that you need a fixed with for overflow and the only solution i could find (havent tried it tho) was to use javascript to get the window dimensions but i am trying to avoid using javascript. heres the code: <b>The Page:</b> Code:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html lang="en">
<head>
<title>
TEST PAGE
</title>
<meta http-equiv="Content-Type" content="text/html;charset=utf-8" >
<link rel="stylesheet" type="text/css" href="stylesheets/default.css">
</head>
<body>
<div id="content">
<div id="logo">
<img src="/Images/owlstreelogo.jpg" height="100px" width="300px" alt="Welcome to Owl's Tree">
</div>
<div id="quicknav" style="height: 25px; background-image: url('/Images/quicknavbackdrop.jpg');">
<div id="quicknavtext" style="position: relative; top: 4px; margin-left: 25px; font-weight: bold; text-align: center;">
<a href="index.html">Home</a>
<a href="">Profiles</a>
<a href="">Chat</a>
<a href="">Forums</a>
<a href="">Messages</a>
<a href="">Extras</a>
<a href="">Tickets</a>
<a href="">Suggestions</a>
</div>
</div>
<div id="sidemenu" style="height: 405px; width: 200px; background-color: #FF0000; overflow: auto;">
<br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>
</div>
</div>
</body>
</html>
<b>The CSS</b> Code:
body {
background-image: url('/Images/grassbackdrop.jpg');
}
a:link {
color: #7E5C14;
text-decoration: none;
}
a:visited {
color: #7E5C14;
text-decoration: none;
}
a:active {
color: #000000;
text-decoration: none;
}
a:hover {
color: #00FF00;
text-decoration: underline overline;
}
div#content {
height: 100%;
width: 100%;
background-color: #FFFFFF;
}
I know that most of the css is in the page and not the external css but thats because i was modifying it heavily to see what would work and what wouldnt. The problem is the fixed width on the side menu as it wont be consistent across different screen resolutions. any help would be much appreciated as i dont want to continue work on this page until i can figure this problem out. I having a bit of a problem with my div tags. I have set a table inside the divs to a fixed width of 300px and the same with the div tag. But if I was to insert text into the table such as: 11111111111111111111111111111111111111111111111111111111111111111111 this makes the table and div tag expand to fit the text on one line. Making is disappear off the page so people have to scroll to view the text. I have tried the CSS command of "table-layout:fixed;" but this just makes the table end and cut of the end of the text. Is there anyway round this?? Hello, How can i create a fixed-width menu to the left with content to the right that fills up the rest of the page. ie, no auto-width, it needs to fill up all the way to the right edge. So if you create a horizontal line <hr> in the content it will draw all the way to the right (except for some padding of course) Like this pictu tinyurl.com/ydsr2ov Hi everyone, I'm interested in making the ads in the rightmost sidebar stay within the 900px of the layout. How can I alter this page so that: 1. The images stay inside the container div 2. If the images are larger than the rightmost column, the column expands to the left and will make the main content feed smaller. I'm still kind of rusty with how fluid width works. Site is h**p://www.topofferspage.com I'm looking for a nice cross browser (well, actually I mainly interested in IE8 and ff3) 3 column layout with header and footer where the middle column has a fixed width and the left and right are variable width. I like these: http://matthewjamestaylor.com/blog/perfect-3-column.htm But none have a fixed width center column (could they be modified for a fixed width center col?) Any suggestions? Hi, I'm wondering how do you make two divs next to each other, in line with each other, but have one to the left be a set width, and the one on the right be everything else that is left (changes as the user scales the browser). Here is an example: ( -100px- )( ---------everything else that is left---------- ) (more stuff can go here now) I'm having trouble having one float: left and width: 100px, the other float: right and width: 100% (I think this part is the problem). Well, this would be the first time I actually am starting to use full DIVs to code a website, usually use tables. Anyways, I have most bugs fixed out since I do somewhat know how to code in DIVs - the question is though, on one of the "right" side content area things I have, the content part extending right over the DIV, and even the container. I also gave both with fixed widths, no idea why this is happening. Anyone have any ideas? http://www.futuregamers.net http://www.futuregamers.net/style.css The main body text in IE stays within the width I gave it, but in Firefox, it just goes off the div, its all not showing becasue I have the containing div overflow:hidden, but why won't it stay in the fixed width div, 603px, in Firefox like it does in IE? mediacontour.com/TCS/frequently-asked-questions.php Hello all, I am implementing a 2 column fixed width template. The problem is that the smaller column does not stretch to match the height of the taller column. All of the online templates I have found remedy this problem by setting a 1 px high background image to span the width of the container div. My problem is that I would like to place an image at the top and bottom of the smaller column. How can I achieve this? After many months of enjoying my new bike club site (http://www.valleyspokesmen.org) I've decided that I want to abandon the semi-liquid display for now and explore a fixed-width site. While my skills are growing, I am not so sure of myself that I feel I can make major changes to my style sheet without risking a crash and burn. So I come seeking advice. Currently when a visitor to my site clicks 'n grabs the right edge of their browser window and pulls to the right or left, the banner photo and title, five main drop-down links, and the center column all move accordingly. I'd like to assign a fixed width, like the old days when we just set the table to a width of 700px or something. Below represents what I *think* are the key parts of my .css file. #wholePage is a div that provides overall style. contentLeft, contentMain and contentRight are div's that represent the three columns that make up the pages. Can you share how I might edit my style sheet so that my site is of fixed width? If the style info below is unsufficient, let me know and I can display the whole .css file, if you like. Code:
#wholePage {
font: 90%/1.1 trebuchet, arial, helvetica, serif;
width:96%; margin:0px auto; color:#333;
}
#contentLeft {
float:left; width:180px; margin:0; padding:0 1em;
font-size:12px; border-right:1px solid #ddd;
}
#contentMain {
margin-left:200px; /* border-left:1px solid #ccc; */
margin-right:200px; /* border-right:1px solid #ccc; */
padding: 0 1em;
}
#contentRight {
background: url(../images/bg_logoRt.png) repeat-y fixed top right;
float:right; width:180px; margin:0; padding:0 1em; font-size:12px;
border-left:1px solid #ddd;
}
#footer {
clear:both; margin:0; padding:0.5em; color:#333;
border-top:2px solid green;
}
Thank you very much for your valuable time. Currently I have 2 fixed columns and a fluid center column. When I resize the window horizontally I want the columns to stay fixed until the center column will begin to overlap the side columns, at which point I'd like the side columns to begin fluidly squashing to accommodate. Is it possible to do this? Only thing I know of is max-width, but I'm not sure if that's correct as I've never used it before. Any help would be VERY appreciated guys, as I need to know this quite soon. -Luke Has anyone else experienced this? I have a div with a specified width of 503px. If I fill it with text, after about a screens worth it's physically 506px in IE (it's fine in every other browser). Anyone any ideas what could be causing this, or a solution to this problem? Many thanks Hi Guys, I have a layout which is currently setup to be liquid. Aka it spreads out depending on how big the browser window is. I'm trying to get it to be a set width. I can't quite get it figured out. Here is the link to the current layout (made to be generic). It's a layout I got from a CCS class. http://65.175.116.253/design/demo.html The css is here http://65.175.116.253/design/css.css The entire package can be downloaded here http://65.175.116.253/design/design.rar Now, to explain how I want it to look, I took my browser and made it just wide enough to show how wide I want the layout to be, and took a screenshot. But I can't get my css to make the whole layout that wide.. I'm scracthing my head here because it's probably really easy. http://65.175.116.253/design/demo.jpg Let's not worry about the exact width, but I want to define in the css the pixel width, so that can be changed whenever. Here is the CSS Code: /*--- Generic Styles ---*/
body
{
background: #e3edc2; color: #333;
font: .8em, Arial, verdana, sans-serif;
margin: 0;
padding:0px;
}
#main {width:840px; margin:18px auto 0 auto; _text-align:left;}
a
{
color: #686397;
}
a img
{
border: 0px none;
}
p
{
margin: 0 0 1em;
}
.smallboldtext
{
font-family: verdana, helvetica, sans-serif;
color: #686397;
font-size: .7em;
font-weight: bold;
}
.mediumtext
{
font-family: verdana, helvetica, sans-serif;
color: #686397;
font-size: .9em;
}
.mediumboldtext
{
font-family: verdana, helvetica, sans-serif;
color: #686397;
font-size: .9em;
font-weight: bold;
}
.largetext
{
font-family: verdana, helvetica, sans-serif;
color: #686397;
font-size: 1.5em;
}
/*--- Header Styles ---*/
#header
{
margin-bottom: 1.75em;
padding-top: 1px;
background: #abd240;
}
#navbar
{
margin: 0;
padding: 0.5em 3em;
background: #686397;
color: #fff;
}
#navbar li
{
display: inline;
margin-right: 0.5em; padding-right: 0.75em;
border-right: 1px solid #99c;
font-weight: bold;
}
#navbar li.last
{
border: 0px none;
}
#navbar a
{
color: #d4ec84;
text-decoration: none;
}
#today
{
text-align: right;
margin-top: -1.66em; padding: 0 2em 0 0;
color: #fff;
line-height: 1;
}
/*--- Content Styles ---*/
#content
{
float: left;
padding: 0 20em 4em 3em;
}
#content h1
{
background: #fff; color: #686397;
font-size: 1.5em;
margin: 0 33% 1.25em -2em; padding: 0.4em 2em;
}
#content h1 b
{
color: #b0d742;
}
#content h2
{
margin: 0.5em 0; padding-bottom: 0.25em;
border-bottom: 1px solid #b0d742;
font-size: 1.5em;
}
/*--- Content Styles ---*/
table.basic
{
border: 0px;
width: 100%;
border-collapse: collapse;
}
table.basicborder
{
border: 2px solid #b0d742;
width: 505px;
border-collapse: collapse;
}
table.mainsearch
{
border: 2px solid #b0d742;
width: 415px;
border-collapse: collapse;
}
/*--- Sidebar Styles ---*/
#sidebar
{
float: right;
width: 17em;
margin: 0 1em 4em -18em; /* this creates a mathematical layout width of -1 */
}
#sidebar div h3{
background: #9b96ca;
}
#sidebar form_div
{
margin: 0; padding: 0.8em;
}
#sidebar div{
background: #3a3c2d; color: #fff;
padding: 0 1em 1em;
margin-top: 0.75em;
}
#sidebar div h3{
font-size: 1.25em;
margin: 0 -0.8em; padding: 0.4em 0.8em;
text-transform: lowercase;
}
#whatiscompany h4{
margin: 0 0 0.5em; padding: 0.5em 0;
border-bottom: 1px solid #fff;
font-weight: normal;
}
#whatiscompany p:first-line{
font-style: italic;
}
/*--- Footer Styles ---*/
#footer
{
clear: both;
padding: 1.5em 3em;
background: #a0c63a;
height: 15px;
}
#footer p
{
margin: .1em;
}
#footer a
{
color: #333;
text-decoration: underline;
}
|
|||||||