|
CSS - <div> Id Block-like
http://warcraftpress.com/theme/theme.html
I'm trying to have #footer be pushed down instead of the menu lapping over it. Basically, I want the menu to push it down, but it just overlays it. Thanks Similar TutorialsI have this CSS for my "globalNav" class: .globalNav {width: 217px; background-image:url(images/barbackground.jpg); background-color: #1B619E; background-repeat: repeat-x; border-right: 1px solid #075284; position: absolute; left: 0px; top: 125px; height: 450px} .globalNav A {background-color: #004E82; border-top: 1px solid #407AA1; border-bottom: 1px solid #00375C; border-right: #00406B; color: white; font-weight: bold; padding: 2px 5px 2px 5px; text-decoration: none; display: block} This is my code for globalNav: <div class="globalNav"> <a href="#">Global 1</a> <a href="#">Global 2</a> <a href="#">Global 3</a> <a href="#">Global 4</a> <a href="#">Global 5</a> <a href="#">Global 6</a> </div> For whatever reason, display block won't work in IE unless I remove the width, height, and positioning. Anyone know any tricks to make this work? Hi guys I was just wondering why cant i see these two <b></b> "blocks" on each side of my <UL> block in ie6 but in Firefox i can? Screenshot of situation: here is my code for the <b> blocks: PHP Code: .navbar b.lefty { display:block; position:absolute; z-index:604; height:100%; width:20px; top:0px; left:-20px; padding:0; margin:0; background-color:#ffffff; } .navbar b.righty { display:block; position:absolute; z-index:604; height:100%; width:20px; top:0px; left:136px; padding:0; margin:0; background-color:#ffffff; } Here is my code for the <UL> block: PHP Code: .navbar :hover ul { z-index:604; width:136px; top:40px; left:0px; padding:0; margin:0; background-color:#333333; text-align:left;} Now here is my HTML: PHP Code: <ul> <b class="lefty">d</b> <li><a href="#">Link</a></li> <li><a href="#">Link</a></li> <li><a href="#">Link</a></li> <li><a href="#">Link</a></li> <li><a href="#">Link</a></li> <b class="righty">d</b> </ul> In the attached gif, you should be able to see exactly what I mean, if I don't explain it well enough. I have a containing block, #content_main, defined as such: Code: #content_main
{
margin-left: 170px;
padding: .5cm .25cm 50px;
}
Headers (h1, h2, h3, etc) are used inside #content_main and are defined like this: Code: h1, h2, h3, h4, h5, h6
{
font-family: georgia, serif;
border-bottom: 1px solid #009;
}
If you look at the attached gif, you'll see the problem. The top one is what happens. It extends the border-bottom to the width of the containing block, even though it places the text correctly. The second one "Something Else" is what I want it to look like. I edited that with Fireworks. Since it renders the same in Firefox and IE, I figure it's my code that's wrong. Any thoughts? MPEDrummer Hi Guys, I have a generic Question/Problem to do with a Block Element (in this case a div) in an li tag. This seems to be a problem in browsers like IE8 and Safari but not IE7 and the latest FireFox version. Where with the div item 'drops down' a line from the li bullet. Like this (. is the li): . Here is My Div Content I want it to be like this: . Here is My Div Content Now this only doesn't happen if I just have plan text between the div with no class, so I'm thinking that something in my css dragHandle class may be at fault. Either that or I need to add something to it to do with float or display: line or block etc? Any thoughts or ideas are most appriciated (note I'm using a div in an li as I'm using the AJAX reorder list control and need something for a 'drag handle' to select an item in the list. The reorderlist uses ul and li to display itslef to I have to use this markup structure). Here is my markup. <ul> <li> <div class="dragHandle"> </div> </li> </ul> DragHandle class is as follows .dragHandle { width: 20px; height: 25px; background-image: url(/styles/icons/selectarrow.JPG); background-position: center; background-repeat: no-repeat; cursor: move; } Hi, im trying to create a block of colour of various width. Im trying to do it with <span> like so <span style="background-color:#336699; width:100px"></span> Now why wouldnt that work and is there a better way to do what im trying to achieve? I would like to have a table with 6 td's across and the 7th td to break line and default to under neath the first td. I tried using display block and firebug outline the area where my content should be but it is still to the right of the 6th td. I would just like to do this to keep it in the same row so i can hide and show it dynamically outside of those first 6 td's. i coudnt find the forum search feature...? but anyone help with wht i am doing wrong? much appreciated Hi guys, can you give me some tips to centering a block (<div>) of code? I would like it centered vertically and horizontally and I would also like the background of the element centered (so the whole thing). text-align doesn't work, it only centers the text, not the element. Thanks, Josh I'm trying to redesign a site that uses old html. I'm just know learning CSS and I was curious if someone could help me rewrite one small part so that I could compare the new and old code. its just a header, with a logo and a banner. The white space is where I would put a logo (its just a white space gif file now).. and the banner is where I'd want the banner. Here is the current code Code: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <html> <head> </HEAD> <body bgcolor="white" leftmargin="0" topmargin="0" marginwidth="0" marginheight="0"> <basefont face="verdana"> <table width="780" height="68" border="0" cellpadding="0" cellspacing="0"> <tr> <td bgcolor="#004C91" align="center" valign="center" width="222"> <img src="http://65.175.116.253/logo/logo.gif" width="196" height="49" hspace="10"> </td> <td bgcolor="#004C91" align="center" valign="center" width="600"> <!-- Begin Free-Banners v2.1 HTML Tag. All Rights Reserved. Patent Pending. --> <iframe src="http://ads.free-banners.com/cgi-bin/adserver/banner?iid=220497&istatus=1&iogeography=53346304&iocategory=51314944&iolanguage=26&ifilter=2&type=2&page=1" hspace=0 vspace=0 width=468 height=60 marginwidth=0 marginheight=0 frameborder=0 scrolling=no> <a href="http://ads.free-banners.com/cgi-bin/adserver/click?iid=220497&istatus=1&iogeography=53346304&iocategory=51314944&iolanguage=26&ifilter=2" target="_top"> <img src="http://ads.free-banners.com/cgi-bin/adserver/banner?iid=220497&istatus=1&iogeography=53346304&iocategory=51314944&iolanguage=26&ifilter=2&type=1&page=1" width=468 height=60 border=0 alt="Free-Banners"></a> </iframe> </td> </tr> </table> I have a simple list rollover menu, and works fine in all browsers, but in ie the block element is not working as it should. When you rollover the links you have to have the mouse positioned over the text in the block to get it to show as a rollover, if you move to the right of the text (where in other browsers it still shows as a rollover) you lose the rollover effect. I have checked and checked and cannot see why this is happening in ie. Here is my code for the navigation layer. Code: <div id="navigation" style="position:absolute; left:89px; top:303px; width:193px; height:307px; z-index:3; overflow:visible"> <p class="f-lp"><ul> <li><a href="index.html">HOME</a></li> <li><a href="events.html">EVENTS</a></li> <li><a href="news.html">NEWS</a></li> <li><a href="galleries.html">GALLERIES</a></li> <li><a href="timeline.html">TIMELINE</a></li> <li><a href="contact.html">CONTACT INFO</a></li> </ul> <p class="address f-lp">To234JA</p></p> </div> And here is my css code Code:
/* navigation */
#navigation {
font-family: Tahoma;
font-size: 14px;
color : #ffffff;
border: 1px solid #fff;
border-width:0px 0px 1px 1px;
}
#navigation ul {
list-style: none;
margin: 0px;
padding: 0;
}
#navigation a {
display: block;
color: #FFFFFF;
width: 178px;
padding: 5px 5px 5px 10px;
border: 1px solid #fff;
border-width:0px 0px 1px 0px;
text-decoration: none;
}
#navigation a:hover {
color: #FFFFFF;
background-color: #000000;
padding: 5px 5px 5px 10px;
}
/* END OF Navigation */
I have a caption text in a span tag appear on an image rollover. I'm trying to make the caption text selectable and having a terrible time. Can anyone point me in the right direction? Thanks! Here is my code: 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" />
<title>testing</title>
<style type="text/css">
<!--
body {
background-color: #FFFFFF;
}
div#img a span {display: none;}
div#img a:hover span{display: block;
position:fixed; top: 300px; left: 350px; width: 125px;
padding: 5px; margin: 10px;
color: #AAA; background: black;
opacity: .5;
font: 10px Verdana, sans-serif; text-align: left;
}
-->
</style></head>
<body>
<div id="img"><a href="#"><img src="http://i43.tinypic.com/2irct0.jpg" width="500" height="392" border="0"/><span>here is the caption text!</span></a></div>
</body>
</html>
So, I'm trying to figure out the proper way to use display:block based on what my needs are. My needs: I'm wanting to create essentially a box with a header, image, and paragraph inside. I want to make it so that when any part of the box is hovered over, it is essentially a link... (changes text color when hovered over). However, I know certain elements aren't supposed to go within <a> tags, such as <h3>, <div>, <p>, etc.... In IE, when I do it this way, using those tags inside the <a href> tag, it works fine. However, in FF, some of the elements aren't applied.... For example, I have 3 boxes of equal length, which all have the same CSS classes, just different content. When I load the page in FF, 1 of the 3 will make the header, image, and paragraph seperate links, and not use the class I have set for it. (The 1 of the 3 isn't always the same... it could be the first box, or second box, or even third box). Sorry for the vagueness, but I'm trying to explain the best I can... If you need to see the code (or site), let me know... Because of the business I'm creating this for, I can't publish it's link until they launch officially. But I can create another page that has the same code to show you what is going on. If you need further clarification as well, just let me know. Thanks. Hey, I been wondering, when using XHTML Strict, what is considered the correct way of making a block level element (like a division) and the document body fill-out/fit the browser window vertically? The way I've been accomblishing this is by using javascript to set the height of the body when-ever the page is loaded and resized, though using something like this(of course, using document.documentElement.clientHeight for IE and using a more sane variable name for the sum of the top and bottom margins ) Code: document.body.style.height = (window.innerHeight - sumOfTopAndBottomBodyMargins) + "px"; and and setting the block level elements css height property to 100%. This works, but its lame! When resizing, the block level element doesn't get resized before you are done resizing and the appropriate event is fired. Not very 21th century. So, to sum up.. can some friendly soul please enlighten me on how I can do this in a decent way using only CSS? Cheers Hi, I was wondering if it's possible to put 2 block-level elements next each other without float and absolute positioning? Can you make them display as inline-elements so that they line up next each other? greets i know this probably aint the first time this has been brought up... but i dont even know what to call it.. so i can search for it.... here is my issue, i have two divs... and naturally with block elements there is a auto <br> or what ever that is put on it... how do i eliminate this.. without making it an inline element?? anyhelp would be GREAT it has been bugging me to death. hey, I have 4 block elements like this: Code: <%@LANGUAGE="VBSCRIPT" CODEPAGE="1252"%> <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> <html> <head> <title>Test</title> <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1"> <link rel="stylesheet" type="text/css" href="test.css" /> </head> <body> <div id="banner"> </div> <div id="logo"> <img src="images/logosmall.png"> </div> <div id="registercontent"> </div> <div id="footer"> </div> </body> </html> and the following CSS: #banner { height: 75px; width: 100%; background-image: url(images/bg1.gif); } #logo { position: absolute; top: 30px; left: 34px; z-index: 10; } #registercontent { position: static; width: 600px; margin-left: 50px; margin-top: 50px; margin-bottom: 50px; padding-top: 20px; padding-left: 25px; font-family: verdana; font-size: 12px; border: 1px solid #39ce96; color: #39ce96; background-color: #efefef; } #footer { height: 75px; width: 100%; background-image: url(images/bg1.gif); } now I have found out that when I include the 'logo' block in the page and view the page in browser, the positioning of my 'registercontent' goes haywire (specifically, the block loses its top margin), if I take out the 'logo' block, the 'registercontent' block returns to normal behaviour. Only problem is, I don't know why..!!! help much appreciated. Hi! Is it OK to mix inline and block elements? For example: <imp ... /> <p> .... </p> Thanks I have several <a>'s on my page, where their display is set to block, and I want to put a submit button in each of them. When I put the <button> in the <a></a>, though, the submit button doesn't go to the processing page, it just goes where the <a> was headed. How to I get the submit button to go to the processing page and not where the <a> was headed? I could put the submit button below the <a> block, but that's very unattractive, and I want the user to be able to click anywhere in the block to go to the next page (except for where the submit button is.) Any help much appreciated! I have been using css for a while, but mostly just for style, not layout. I am trying to do a site, with basically three divs. One on the left for content, two on the right...one for a menu, and the other showing an image. I have stripped down the page to the smallest possible that I can show the problem. Basically, I want the image (red background) to be below the menu (dark purple bg), and both of them on the right of the content (lavendar bg). I have validated the html, but I am not getting a response from the css validator right now. Here is my html so far: Code:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"(URL address blocked: See forum rules)">
<html>
<head>
<title>Vote YES Mosinee!</title>
<meta http-equiv="content-type" content="text/html; charset=iso-8859-1">
<style type="text/css">
body{
padding: 0px;
background-color: #FFF;
text-align: center;
font: 76% Verdana,Arial,sans-serif;
}
div#container{
width:800px;
margin: 0 auto;
text-align: left;
background: #ff0;
}
div#content{
background: #d1c9e2;
width:550px;
}
div#nav{
float: right;
width:240px;
background: #484393;
}
div#nav p{
padding: 5px 0;
}
div#nav h2{
font-size: 110%;
color: #333;
}
div#imageSection{
float: right;
width: 240px;
background: #ff0000;
}
</style>
</head>
<body>
<div id="container">
<div id="nav">
<ul>
<li>There will be a menu here.</li>
<li>It will have many items.</li>
<li>It will have many items.</li>
<li>It will have many items.</li>
<li>It will have many items.</li>
<li>It will have many items.</li>
<li>It will have many items.</li>
<li>It will have many items.</li>
<li>It will have many items.</li>
</ul>
</div>
<div id="imageSection">
<img src="(URL address blocked: See forum rules)" alt="Children">
</div>
<div id="content">
<p>Vote YES is dedicated to reaching out to the members of the Mosinee community and to raising awareness of the situation our elementary students face each school day. Through their efforts, they hope to gain the support of Mosinee's voters and help the community create a facility that enables an optimal and safe learning environment.</p>
<p>After years of failed referendums and the advent of another proposed addition, numerous community members have come together and organized "Vote YES" (VOTE for Your Elementary School). The organization was formed to support the referendum proposed by the school board and help educate individuals around the community. </p>
<p>On April 3, 2007, the voters of the Mosinee School District will be asked to approve a referendum to address space inadequacies and safety issues at the current elementary school. The VOTE YES group formed for a number of different reasons. Teachers and parents found it difficult to ignore the glaring parking issues, overcrowding in the cafeteria, the use of hallways and storage closets for classes, and the 20-year band-aid solution of adding portable classrooms. Taxpayers couldn't ignore the problem and individuals throughout the community stepped forward to help. </p>
<p>Many More Paragraphs....</p>
</div>
</div>
</body>
</html>
How can I achieve this? I'm trying to put an icon next to a block of text, but I have a bunch of strange width problems. I'd like it to be directly next to the news story, but without the text wrapping. So far, my solution causes the gap between the icon and the text to get really huge as resolution increases. What I want is for the icon to be about 20 or 30 pixels away regardless of the resolution. Any simple way for me to do this? I'm still trying to get the hang of all this CSS stuff. News page: http://www.brickfilms.com/ Story code: Code: <div id='newsItem'><img src="<?echo $icon;?>" width="64" height="64" class="newsIcon"> <div id='newsText'> <h3 class='newsTitle'><?echo $title;?></h3> <p class='newsStory'><i>by <?echo $author;?>, <?echo $date;?></i><br> <?echo $story;?> </p> <br></div> </div> The CSS is at http://www.brickfilms.com/brickfilms.css Thanks in advance. Hi, I guess this is a fairly easy one to sort out. I have a main menu of 5 links which i want to highlight when you mouse over the area. At the moment I have coded the menu in a table which I know is not so great, but its the only way I can get the background image to display across the whole of the <div> and this only works in FF, in IE6 you have to mouse over the link text itself before the highlighting will appear. I just want to know the "correct" way to code this so that when the mouse hovers over the line the link is on the highlighting will appear. Take a look at www.webwizedezignz. co . uk to see what its like at the moment. Cheers in advance |
|||||||