|
CSS - Checkbox Stretching Heading
Is there a way I can have the checkbox to the right of the heading without stretching out the actual heading? It works fine when it is floated to the left
http://www.iankovi.com/html_.html http://www.iankovi.com/css_.css Similar TutorialsI'm trying to put together a CSS layout for a blog, and unfortunately my meager skills have crapped out on me. The page currently looks like this: http://prestonandtread.com/test/ I want it to be a full screen header while the footer is fixed and the width of the content. I thought I had it pieced together ok enough from different tutorials, but the top and left sides of the screen show background and the content isn't parking itself on the page correctly. Help me get this to where it should be! Code: <style type="text/css">
html,
body {
margin:0;
padding:0;
height:100%; /* 100 % height */
}
#header {
width: 100%;
height: 150px;
}
html>body #header {
position:fixed;
z-index:10; /* Prevent certain problems with form controls */
}
html>body #wrap {height:100%;} /* 100 % height */
#wrap {
width:479px;
margin:0 auto;
}
html>body #content-wrap {height:100%;} /* 100 % height */
html>body #content {padding:10px 10px 10px 10px;} /* 6em = height of #header and #footer + 1em, 1em = give the content some breathing space */
#footer {
width:479px;
height:160px;
}
html>body #footer {
position:fixed;
bottom:0;
z-index:10;
}
html,
body {
background-color: #99CCFF;
}
#header {
text-align: center;
background-image: url(background.jpg);
background-position: top left;
background-repeat: repeat-x;
background-color: #99CCFF;
}
#footer {
text-align: center;
background-image: url(eyes.jpg);
background-color: #99CCFF;
}
#content-wrap,
#content {
background-color: #FFFFFF;
}
#footer a {color:#111;}
</style>
Hi guys. The strangest thing happened to me a few minutes ago. I tried centering the heading for my webpage using css in dreamweaver. When I looked it up on the browser to see whether it checked out right, to my horror, I discovered that the heading had disappeared. Could someone tell me what went wrong? thanx kaz. Again I am new to CSS so bear with me here...I did search this forum before posting this... I am using a 3 column template, I am having some problems between the "#columns" with the heading <h*> of these columns. as long as each column has a differnt heading size all is well but if two columns have the same size heading I can't seem to be able to make them different colors I have 3 images that I would like to go togather to form a heading with rounded corners. I want to use 3 div tag to accomplish this. I am unable to get all 3 to lign up Code:
.rounded_STYLE{
background-color: #fff;
border: 1px solid BORDER_COLOR;
position: relative;
}
.rounded_STYLE{background:url('/images/chg.gif') repeat-x; }
.rounded_STYLE > .tl, .rounded_STYLE > .tr, .rounded_STYLE > .bl, .rounded_STYLE > .br{
width: 6px;
height: 24px;
position: absolute;
}
.rounded_STYLE > .tl{
background: url(/images/clg.gif) top left no-repeat;
}
.rounded_STYLE > .tr{
background: url(/images/crg.gif) top right no-repeat;
}
.rounded_STYLE > .tc{
background: url(/images/chg.gif) top right no-repeat;
}
.rounded_STYLE > .bl{
background: url(/images/bl.png) bottom left no-repeat;
}
.rounded_STYLE > .br{
background: url(/images/br.png) bottom right no-repeat;
}
Code: <div class="rounded_STYLE rounded"> <div class="tl"></div> <div class="tc"><table class="h"><tr><td class="l"></td><td>dddddddddd</td><td class="r">ssssssss</td></tr></table></div> <div class="tr"></div> ... contents of the block go here ... <div class="bl"></div><div class="br"></div> </div> H all, I have a horizontal navigation bar which basically looks like this: Thing0 | Thing1 | Thing2 | Thing34 What I want to do is when I select a link to a new page, I'd like (using CSS) to have that link highlighted so that the user can see which page he is on. It's either that or hardcoding the name to each page...but since it's already in the Nav bar, I thought highlighting the link on the nav bar serves as a heading as well... Possible? Hi everybody. I am developing a site for classic games, and I am having trouble putting a navigation list on the left of my page and aligning a heading on the right with the top of the list border. Code:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html lang="en">
<head>
<title>Choose a Page</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<style type="text/css">
/* <![CDATA[ */
body {
font-family: arial;
font-size: 12pt;
margin: 0;
padding: 0;
}
h1, h2 {
text-align: center;
}
ul {
margin: 0;
width: 25%;
height: 20em;
padding: 0;
border: .5em solid #00f;
list-style-type: none;
list-style-position: outside;
}
li {
background-color: #0ff;
padding: .5em 0 .5em;
}
li a {
background-color: #0f0;
height: 1em;
padding-left: .5em;
display: block;
font-weight: bold;
}
/* ]]> */
</style>
</head>
<body>
<h1>Game Index</h1>
<ul>
<li><a>Home</a></li>
<li><a href="dir.html" title="View the Directions">Directions</a></li>
<li><a href="gbc.html" title="View GameBoy/GameBoy Color games">GameBoy/GB Color</a></li>
<li><a href="gba.html" title="View GameBoy Advance games">GameBoy Advance</a></li>
<li><a href="nes.html" title="View Nintendo/Famicom games">NES/Famicom</a></li>
<li><a href="snes.html" title="View Super NES/Super Famicom games">SNES/Super Famicom</a></li>
<li><a href="ggear.html" title="View Game Gear games">Game Gear</a></li>
<li><a href="genesis.html" title="View Genesis MegaDrive games">Genesis/MegaDrive</a></li>
<li><a href="32x.html" title="View 32X games">32X</a></li>
<li><a href="psx.html" title="View PlayStation games">PlayStation</a></li>
</ul>
<h2>Select a page</h2>
<div id="pgdesc">Please make a selection from the list above</div>
<h3>Note: This page does not host ANY emulators. You have come to the wrong place if you are looking for an emulation site.</h3>
<div id="img">
<img id="atari" src="atari2600.jpg" alt="Atari 2600">
</div>
</body>
</html>
I realize that a list and a heading are both block-level elements, but I'm wondering... I'd rather not use absolute positioning since it doesn't work well with different resolutions. I'm just wanting it to work with 800x600 and 1024x768 resolutions. Can anybody help? Hi, I am trying to add a 8px border under my headings, but I only want it to go as far as the word. At the moment, it is going the whole width of my div container. This is what I have at the moment: PHP Code: #sidebar h2, #sidebar h3 { color: #444; font-size: 20px; font-weight: normal; margin: 0px 0 5px 0; padding: 0px 0 0px 0; border-bottom: 8px solid #FE9023; } Any help would be great. Thanks I'm trying to figure out how to do something like this: Code: <h6>Lorem Ipsum Dolor <span>jan 10 2006</span></h6> And make the heading line up to the left side and the span on the right. It's close. It's lining up on the right but on the next line down rather than the same line. Take a look. Any bright ideas on why this is happening or how to fix it? Thanks. This is probably something extremely simple, but I'm the slow kid today... I have a right-hand sidebar with a heading that is not behaving the way I want it to. After each word, it creates a new line, then the next word.... Any suggestions, as always, are appreciated. Here's the page: http://www.websimage.com/pcqtest/index.html Thanks guys/gals :) I read a thread on div streching but I didn't totally understand what was going on in that particular case so I thought I create a new thread and throw my code up as well. I'm trying to have a minimum height with a footer anchored at the bottom of the div (contained within it for the bg image to carry through behind the footer). But I can't seem to get all the pieces to work together. The problem I'm dealing with now is that the div won't stretch and the footer will be pushed down way too far. Here is what's happening. So how do I get the div to keep a minimum height of 706px or like 80% and then how do I get it to auotmatically stretch with the content and keep the footer anchored at the bottom of the stretched div? Here's the code: Code:
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<HTML>
<HEAD>
<TITLE>binkwaffle</TITLE>
<META HTTP-EQUIV="Content-Type" CONTENT="text/html; charset=iso-8859-1">
<style type="text/css">
<!--
@import url(binkwaffle.css);
-->
</style>
<script language="JavaScript" type="text/JavaScript">
<!--
function MM_reloadPage(init) { //reloads the window if Nav4 resized
if (init==true) with (navigator) {if ((appName=="Netscape")&&(parseInt(appVersion)==4)) {
document.MM_pgW=innerWidth; document.MM_pgH=innerHeight; onresize=MM_reloadPage; }}
else if (innerWidth!=document.MM_pgW || innerHeight!=document.MM_pgH) location.reload();
}
MM_reloadPage(true);
//-->
</script>
</HEAD>
<BODY>
<div id="main">
<div id="header"></div>
<div id="topnav">
<a href="index.php" class="topnav">home</a>
<a href="cards.php" class="topnav"> cards</a>
<a href="faq.php" class="topnav"> faq</a>
<a href="about.php" class="topnav"> about</a>
<a href="contact.php" class="topnav"> contact</a>
</div>
<!-- START EDITABLE AREA-->
<div id="content" class="binkwaffle">
<div>
<p>Hello</p>
<p> </p>
<p>This</p>
<p> </p>
<p> </p>
<p>is</p>
<p> </p>
<p> </p>
<p> </p>
<p>a</p>
<p> </p>
<p> </p>
<p> </p>
<p>test</p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p>to</p>
<p> </p>
<p> </p>
<p> </p>
<p>seee</p>
<p> </p>
<p> </p>
<p> </p>
<p>if </p>
<p> </p>
<p> </p>
<p>this</p>
<p> </p>
<p> </p>
<p>is</p>
<p> </p>
<p> </p>
<p>working.</p>
<p> </p>
<p>thank you.</p>
<p> </p>
<p> </p>
</div>
<div id="footline">
</div>
<div id="footer" class="copyright">copyright 2006 binkwaffle
<div id="bottomnav">
<a href="index.php">home</a>
<a href="cards.php"> cards</a>
<a href="faq.php"> faq</a>
<a href="about.php"> about</a>
<a href="contact.php"> contact</a>
</div>
</div>
</div>
<!-- END EDITABLE AREA-->
</BODY>
</HTML>
I have two divs floated inside another div, but the outside div isn't stretching to accommodate the inner divs. Why not? The TMPL tags are used by the HTML::Template perl module. html Code: Original - html Code <div class='photo-navigate'> <div style='width: <TMPL_VAR NAME=THUMBNAIL_WIDTH>; float: left;'> <TMPL_IF NAME=PREVIOUS_EXISTS><a href='<TMPL_VAR NAME=PREVIOUS_LINK>'><img src='<TMPL_VAR NAME=PREVIOUS_IMG>' border=0 /></a></TMPL_IF> </div> <div style='width: <TMPL_VAR NAME=THUMBNAIL_WIDTH>; float: left;'> <TMPL_IF NAME=NEXT_EXISTS><a href='<TMPL_VAR NAME=NEXT_LINK>'><img src='<TMPL_VAR NAME=NEXT_IMG>' border=0 /></a></TMPL_IF> </div> </div> <div class='photo-navigate'> <div style='width: <TMPL_VAR NAME=THUMBNAIL_WIDTH>; float: left;'> <TMPL_IF NAME=PREVIOUS_EXISTS><a href='<TMPL_VAR NAME=PREVIOUS_LINK>'><img src='<TMPL_VAR NAME=PREVIOUS_IMG>' border=0 /></a></TMPL_IF> </div> <div style='width: <TMPL_VAR NAME=THUMBNAIL_WIDTH>; float: left;'> <TMPL_IF NAME=NEXT_EXISTS><a href='<TMPL_VAR NAME=NEXT_LINK>'><img src='<TMPL_VAR NAME=NEXT_IMG>' border=0 /></a></TMPL_IF> </div> </div> css Code: Original - css Code div.photo-navigate { border: 1px solid black; background-color: #eeeeee; }
div.photo-navigate {
I know I've seen lots of questions on div sizing and positioning, but I apparently haven't been able to follow them. So I wrote out some very basic containers, and am looking for some very basic answers, even if they're only "no, it won't work." So let's say I have a layout like this: PHP Code: <div style="height: 100%; width: 100%; border: 2px red dashed; text-align: center;"> <!-- outside div --> <div style="height: 200px; width: 300px; border: 2px blue solid; text-align: left; margin-left: auto; margin-right: auto; "> <!-- centered div --> <div style="height: 100px; width: 100px; border: 2px green dashed; text-align: left; float: left;"> <!-- floated div 1 --> hello world 1 <!-- /floated div 1 --> </div> <div style="height: 100px; width: auto; border: 2px orange dashed; text-align: left; float: left;"> <!-- floated div 2 --> hello world 2 <!-- /floated div 2 --> </div> <div style="font-size: 0px; height: 0px; width: 0px; clear: both;"> <!-- clear div / --> </div> <!-- /centered div --> </div> <!-- /outside div --> </div> What I want to happen is for the orange div (floated div 2) to fill the rest of the width of the surrounding blue div (centered div). I know with this simple example I can simply set the pixel width, but I want to eventually make it more dynamic, allowing for variable sizes, like if I set the blue div to be a percentage instead of a fixed width. Any ideas? (Even links to appropriate threads are appreciated!) Thanks! (edit: had to update "centered div" to be firefox compatible) Hey everyone, my first time exploring page layouts using CSS and I'm having a few problems. I have a simple page with separate Header, Navigation and Content divs stacked on top of each other inside of a wrapper div (used to align the three to the center), with another div for the Footer placed below everything else. Here's how it looks now: Code: <html> <head> <title>CSS Divisions</title> <style type="text/css"> #Wrapper { width:800px; margin-left:auto; margin-right:auto; text-align:left; } #Header { width:800px; height:120px; background:#FC6;} #PNav { width:800px; height:40px; float:left; background:#CCC; } #Content { width:800px; height:400px; float:left; overflow:hidden; background:#FFC; } #Footer { width:100%; height:80px; float:left; text-align:center; background-color:#FC6; } </style> </head> <body> <div id="Wrapper"> <div id="Header">Header</div> <div id="PNav">Navigation</div> <div id="Content">Content</div> </div> <div id="Footer">Footer</div> </body> </html>
Ideally what I want is for the page to look exactly how it is, but with the footer stretching from the bottom of the Content div, down to the bottom of the wherever the user's browser has loaded; basically to fill the vertical remainder of the screen. I've tried setting the footer height to 100%, but that forces the page to extend vertically, and I fumbled around with about a dozen other techniques not really knowing what I was doing, and I've had no luck so far. Any help would be greatly appreciated! Ok, iv had this problem alot when making sites, however this time it seems to be more complicated. http://area51.chicagowars.com/templates/modern_rouge/index.php is a site im working on. However the background in <div class="outer"> wont stretch. Iv used clearfix CSS such as Code: div.inner:after {
clear: both;
display: block;
content: ".";
height: 0;
visibility: hidden;
}
/* hide from IE-mac \*/
* html .inner {
height: 1%;
}
div.inner {
display: block;
}
/* end hide */
and the simpler Code: div.clearfix
{
height: 0;
clear: both;
}
<div class="clearfix"> </div>
You'll be able to see these in the script. Iv done this kind of thing before (http://www.rap-wars.com) where i had tyhe same problem, but this time its not workin, i think its the breadcrumbs thats complicating things! Does anyone have the solution? I know this has been done to death but all the fixes I looked at on here didn't seem to help me... Essentially I'm trying to create a three-column layout plus a header and footer for an email. The left and right columns essentially act as thick borders and the middle column is for content. As such I want the left/right columns to stretch to the height of the middle column. Someone suggested that I wrap them in a div with the height set to 100% so that they expand to fill that space, but it hasn't worked. As such the content breaks the layout and the borders don't continue down with the rest of the content. Here's the code (minus header + footer divs): Code: <div name="column" id="column" style="width:600px; height:100%;"> <div style="padding:0px; margin:0px;"> <div name="leftbar" id="leftbar" style="float:left; width:20px; height:100%; background-color:#69696b; border-left:1px solid #252429; border-right:1px solid #bcbcbe;"></div> <div name="contentbox" id="contentbox" style="text-align:left; width:553px; float:left;"> Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.<br /><br /> Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.<br /><br /> Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.<br /><br /> Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.<br /><br /> </div> <div name="rightbar" id="rightbar" style="float:right; width:20px; height:100%; background-color:#67666b; border-left:1px solid #e0dfe4; border-right:1px solid #302f34;"></div> </div> </div> This is probably a really simple fix but it's been making my head hurt. Ideally I'd have turned those borders into background-images and set them to repeat-y but HTML emails don't like background images. Any ideas? Ok so www.gameyin.com/index.php You will see a dotted border flowing up the left nav bar, and below advertisements (Yes I know I'm using tables. I will eventually move them onto a roll over menu.) I have it set up so it should only be dotted border for the ads. But it is going around everything. Weird. Here is.. CSS for it. Code: .advertisement {
font-weight: bold;
color: #000000;
border: 1px dotted;
width: 100%;
}
.advertisement p {
font-weight: bold;
color: #000000;
clear: both;
text-align: center;
}
HTML for it Code: <div class="advertisement">
<p>Have A Look At Some Of Our Sponsors</p>
<img src="images/ad1.gif" alt="Ads" />
<img src="images/ad2.gif" alt="Ads" />
<img src="images/ad3.gif" alt="Ads" />
<img src="images/ad4.gif" alt="Ads" />
<img src="images/ad5.jpg" alt="Ads" />
<img src="images/ad6.gif" alt="Ads" /><br />
<a href="advertise.php">Put Ad here</a>
<a href="advertise.php">Put Ad here</a>
<a href="advertise.php">Put Ad here</a>
<a href="advertise.php">Put Ad here</a>
<a href="advertise.php">Put Ad here</a>
<a href="advertise.php">Put Ad here</a>
</div>
You will see more if you go to site and see what I mean. Dunno if I got all the HTMl for it and CSS. I wrote it a while ago with the problem. Just never got around to trying and fix it . When I shrink my browser to the left my div slides to the left out of view. Is there a way to create a cut off point so my div can neatly meet the edge of the browser and stay put when minimizing the browser to the left? Hopefully this is an easy question, how is this done to fill a frame, without repeating, just to stretch it out and fill up a frame? Another question with this menu: Austin360 Does anyone know how they made the widths of the submenu items stretch/adjust wider for more text, while the top level stays the same? I have a couple of dropdown templates, but the submenus are only as wide as the top level list items. (If their text is wider, the top level item is stretched too -- not what I want) Thanks in advance! Hello, I have a div element within a series of nested tables. the width of the cell that the div element is in is set to "45%". My div element has a CSS style of "overflow:auto;" meaning I want scrollbars to appear if the contents of the div are larger than the alotted space. For some reason, the scrollbars appear, however, My div element stretches and pushes other elements off of the screen. Is anyone aware of any bugs or something that could cause this? The thing that is really strange is that I only have this problem when the table within the DIV contains elements that have the nowrap attribute set to true. Thanks, Crystal |
|||||||