|
CSS - Help Rewriting A Code Block For Css
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> Similar Tutorialshttp://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 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 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> 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? 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 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 I 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? 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. 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 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 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 div block which contains links on the left, it is using absolute positioning, I want to have the contents div block on the right, I want it 20 pixels away from the right border and 20 pixels away from the left div block, so if I resize my left div block, my right div block is always 20 pixels ahead of it. The code is included below: Code: <div style="position:absolute; top:20; left:20; width:200; height:200; z-index:1; padding:3px; border: #0000FF 1px solid; background-color:#FFFFFF;"> <div align="left">- <a href="#1">News</a></div> <div align="left">- <a href="#3">FAQ</a></div> <div align="left">- <a href="#2">ABC</a></div> <div align="left">- <a href="#6">Forums</a></div> <div align="left">- <a href="#7">Contact</a></div> </div> <div style="position:absolute; top:20; left:235; right:20; z-index:1; padding:3px; border: #0000FF 1px solid; background-color:#FFFFFF;"> <div align="left">Caption</div> <div align="left">bla bla bla This is the right side. </div> </div> I'm reading the "containing blocks" section of http://www.brainjar.com/css/positioning/: "Block boxes are generated by elements such as P, DIV or TABLE." <div> This is the first sentence. <p>This is the second sentence.</p> </div> "It's interesting to note that while the text of the first sentence in the above example generates an inline box" -Didn't they say that block boxes are generated by div? So why isn't the text of the first sentence in a block box? 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>
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? 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 have been reading about the problems regarding visibility with IE/FireFox/Safari. I have: Code:
<input type="button" onClick="toggleSurveyView('block')">
<input type="button" onClick="toggleSurveyView('table-row')">
<tr id="surveyDetails">
<td>HI</td>
</tr>
function toggleSurveyView(visible) {
document.getElementById('surveyDetails').style.display = visible;
}
In IE visible: block works great in FireFox/Safari visible: table-row works great. Is there a work around to get this visibility issue resolved for all browsers? Or am I going to have to perfrom some sort of browser type check? I just want to be able to toggle showing this table row on and off 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! |
|||||||