|
HTML - <ul> Not Filling The Full Width Of A Div
I'm making a small little template for just messing around matching colours, and i've tried putting a vertical navigation bar on the left.
I have the div with a <ul> inside of it, but it's not taking up the full width of the div. It's taking up 75% of the div. Does anybody have any answers for it happening? I have posted my code below. HTML 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">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<link href="css/style.css" rel="stylesheet" type="text/css" />
<title>Untitled Document</title>
<style type="text/css">
body {
background-color: #6698FF;
font: 100%/1.4 Verdana, Arial, Helvetica, sans-serif;
background: #4E5869;
margin: 0;
padding: 0;
color: #000;
}
</style>
</head>
<body>
<div id="wrap">
<div id="container">
<div id="header"></div>
<div id="sidebar1">
<ul class="nav">
<li><a href="#">Home</a></li>
<li><a href="#">Link two</a></li>
<li><a href="#">Link three</a></li>
<li><a href="#">Link four</a></li>
</ul>
</div>
<div id="content">dfgfdgdfg</div>
<div id="sidebar2">sgdsgdfg</div>
</div>
</div>
</body>
</html>
HTML Code: #wrap {
width: 1050px;
margin: 0px auto;
}
ul.nav {
list-style: none;
border-top: 1px solid #666;
}
ul.nav li {
border-bottom: 1px solid #666;
}
ul.nav a, ul.nav a:visited {
padding: 5px 5px 5px 15px;
display: block;
text-decoration: none;
background: #8090AB;
color: #000;
}
ul.nav a:hover, ul.nav a:active, ul.nav a:focus {
background: #6F7D94;
color: #FFF;
}
#container{
width:800px;
min-height:700px;
margin-left:auto;
margin-right:auto;
background-color:#5CB3FF;
}
#header{
}
#sidebar1{
width:20%;
float:left;
background-color:#A0CFEC;
}
#content{
width:60%;
float:left;
background-color:#FFFFFF;
}
#sidebar2{
width:20%;
float:left;
background-color:#A0CFEC;
}
Similar TutorialsI have some information laid out with a fixed width table in html. It looks fine on a regular monitor. When I display it on a wider monitor, or with a different resolution, I have extra unused space on the right. This, of course, makes sense. The question is: what is the recommended method for allowing the text and images to fill out the rest of the screen width - especially where it will work with different monitors, resolutions and browsers? Thanks. Hi All, Nice site BTW, my problem is i want to add some text with a background colour behind it but i want the background colour to stretch the full width of the page ? Can anybody help me out Thanks I have a problem filling select input from javascript/ajax: the important bits of code: function handleFillList() { if (filledList.readyState == 4) window.document.getElementById('listToFill').innerHTML = filledList.responseText; alert(filledList.responseText); alert(window.document.getElementById('listToFill').innerHTML); One would think, that both alerts would show the same result, but it is not so! The first gives me (only the beggining is important) : <option value=CANADA>CANADA</OPTION><option value=CHINA>CHINA</OPTION><option ...... The second gives me: CANADA</OPTION><OPTION value="CHINA">CHINA</OPTION><OPTION..... why did the begging got lost! And then I don't get the select filled as it should be! Thank you for your help, ales Hi, I need some help. I am using a script which breaks down the cookie information to retrieve a cookie ID. This ID is then displaying using the following function: Code: <script type="text/javascript">var gac = new gaCookies(); document.write(gac.getUniqueId());</script> I have a form which my site visitors can fill in. On the form there is a text field called CookieID. What i am after, is getting the output of the code above to become the 'value' of the field... I am using the following javascript to populate the filed when the page loads: Code: function initForm(){
document.getElementById("Field110").setAttribute("value", "text_to_display");
}
However, this function can only be used to display 'text' not html or a script. Does anyone have any insight as to how this could be done? Any help appreciated! The layout of this page I'm making requires a centered table, 800 pixels wide and 100% high. I am having huge problems making it fill the entire height of the page though, it just stops rather than going right to the bottom of the page. It's a 4.01 transistional compliant page if that's relevant. Here's a link to the page. Here's a link to the page (apologies for the file size) link to page I want the dark green center section, and the two side cells with tiled graphics to extend right down to the bottom of the page, regardless of height. The center table with the graphics can stay where it is or vertically center, I don't mind about that. I also need it to have no vertical scrollbar when it's viewed fullscreen. If I remove the doctype, it works fine, but I'm wondering if there's a way to have it vaild for that doctype and still look ok? I've tried everything I can think of and am not turning up anything useful with web searches, if anyone can tell me where I've gone wrong and if this is possible to fix in html, I'd really appreciate it. I can't use CSS, and the doctype has to be as it is, because that's what the specs say (it's for an html class). Thanks for any help. im creatinh a box containing a text. The box must be wide enough to fill a text. menu.style.width = tekst.length - this functioin gives the number of letters in text. So if the text is "hello" then the width is 5 pixels. But i need the widith of pixels needed to fit the text in a box. How can i do that? Hi, Is there away to force my website to fit an Iphone screen when viewed on the iphone. At the moment the width doesn't full span the Iphones screen so it looks bad. http://pjm.co.uk.uksite4.yourwebserv...splay&PageID=5 Thanks alot Joe Hello all, I am looking for help with something that I know is pretty simple. http://www.somesite.com/refer.htm?4 Upon loading the page, I want to take the value following '?' and post it inside a text area form on the page. Im very new to html and javascript so im not sure exactly how to achieve this. Thanks for the help. I need to create a link that will bring up a page that shows nothing but the <body> of the page, with no menu bars, status bars etc. I have an old page created with FrontPage years ago that does it perfectly, nothing from the browser shows at all, not menu, status scroll, etc shows. However, on my new fancy Joomla 1.5.10 site I cannot get it to work... even with the same code pasted in from the old site. I cannot get it not to display the menu and status bars when I try it on my Joomla site.. This is the code from the old site: <a href="BlackPage.htm"> <img border="0" src="luscher%20black%202.jpg" lowsrc="luscher%20black%202.jpg" width="100" height="71"></a> It even has a bunch of garbage in it and it works perfectly. Why can't I get the same thing to work on my Joomla site? Thanks Larry I have a thumbnail jpg on my main page and would like to display the full size jpg on a separate page when the thumbnail is clicked. I know, a total newbie thing, but you know how to do it and I don't! A simple example would be much appreciated. Hi all friends, I am a photographer and I am trying to set up my website with a full screen gallery. The address is: http://provasitofoto.altervista.org If you go to the portfolio section and click on the any thumbnail you will see the chosen image go to full screen which is actually what I would love to have but....as you will probably notice, you will see only a part of the image, even if it is full screen it is "cutted". Now of course what I need is the possibility to view the entire image full screen, even stretched but with the ability to fit in any screen and browser. I am new to this kind of things znd so here I am asking for your help. Please consider me like a 5 years old baby and so explain to me step by step what I should do to solve this problem. Thanks in advance to any kind soul who are will to help me. God bless you. Marco from Italy Hi, Im trying to get a website up and running for a small business just starting up without the finances to pay for a designer, I know a little bit of html, and have used dreamweaver before but im going to try and stick to HTML on this one if its possible so i can quite easily change it as i need to. This is what im trying to create http://img17.imageshack.us/my.php?image=helpq.jpg I have the black logo, as a large rectangle only. I have added those long black dividers in paint to show you what im trying to do. Been playing about with it for hours today and got no where I know i could do it as one MASSIVE image but that wouldnt be very economical would it. Thanks for any advice. Hey all, i have a question. What is the main difference between an academic version and a full version of a program such as Dreamweaver? Are you only supposed to use the Academic version for educational purposes only? Meaning if i design a website with an academic version i can't legally put it up as a business website? I was always curious about how this actually works, thanks. Hi all I only know very basic HTML and at the moment. I have an image that is hosted on Buzztouch. http://www.buzztouch.com/application...elfordboat.jpg Now my Question What code would I need to write so when you click on a page the image appears full screen no mater what brower you use it on. ? thanks Hi I'm having trouble acheiving something with a landing page. I'm trying to get a 'full bleed' efect with a header, body, footer type of thing. I attached a mockup and folder with html/css/images for the landing page for reference For some reason I can't get the white background. I had it working fine when i first started writing the code, and as soon as I created a LEFT and RIGHT div column it disappeared. Any advice? Thanks! This splash page is supposed to take you to my website in "full-screen" ,but the pop-up keeps coming back as an error.. I know it's something simple,but I can't figure out what I'm doing wrong..can someone look at my code and let me know what is wrong? it's here - http://www.practiceboard.com/?4898323 Thanks!! Heather I'm fairly new to making websites, and I want to make a website with a full screen background image jpg, but I'd like it to be full screen in all resolutions. Is this posible? I want to use this image as a background http://img236.imageshack.us/img236/4...dexbackcu3.jpg and then add menus and text content. any tips? thanks! jdawest I want to know how to make a div stretch to the full height of a container! Here is the html: 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"> <head> <title>This site is currentely out of order! Chack back later.</title> <link href="style.css" rel="stylesheet" type="text/css" /> </head> <body> <div id="container" style="display:block"> <div id="leftside" style="display:block"><img src="images/leftside.gif" alt="" /></div> <div id="logo" style="display:block"> <img src="images/logo.gif" alt="" width="315" height="140" title="" /> </div> <div id="content" style="display:block"> <br /> <br /> <br /> <br /> <br /> <br /> </div> </div> </body> </html> And then the css: Code: /* START - Master */
div {display:none} /* Keep NO MATTER what - Keep at top */
body {background-color:#000000; background-image: url('images/watermark.gif'); background-repeat: no-repeat; background-attachment: fixed}
#container {width: 85%; margin-left: 7.5%; background-color: #666666; color: #030303}
#leftside {float: left; min-height: 100%; height: 100%; background-image: url('images/leftside.gif'); background-repeat: repeat-y}
/* END - Master */
/* START - Header - No change */
#logo {width: 85%; margin-left: 7.5%; background-color: #7B7B7B; text-align: left; font-size:15pt; border: none}
/* END - Header - No change */
/* START - Content */
/* END - Content */
/* START - Footer - No change */
/* END - Footer - No change */
The "leftside" image is supposed to be the full length of the header + content. Thanks! Hello, I've got a pesky bug that I can't figure out... I'm designing a website for a record store and the width is a little larger than 800px.. on larger screens, it loads just fine.. however when I try to load it on a smaller screen and scroll to the right (to see the info that is cut off) all of the background colors of my elements continue to be cut off. This does not occur when I start with a small window on a big screen and resize... hope that makes some sort of sense here's the site |
|||||||