|
CSS - This Should Be Simple....aggh!
I have sworn that I will not use tables. Don't let me give up and use them.
I want a simple header at the top of the page. The header consists of two boxes. The left one contains a logo. The right one contains some html code. The right one needs to go butt up against the left one. I have the following: Code:
#header {
position: absolute;
top: 0;
left: 0;
height: 200 px;
width: 779 px;
}
#header #logo {
background-image: url(../images/gcxn_logo.jpg);
top: 0;
left: 0;
background-repeat: no-repeat;
width: 368 px;
height: 200 px;
}
#header #summary {
top: 0;
left: 368 px;
height: 200px;
width: 411 px;
}
and my html looks like this: Code: <div id="header"> <div id="logo"> <a href="http://localhost/...."><img src="transp.gif" border="0" height="199" width="300"></a> </div> <div id="summary"> <ul> <li><a href="....">A</a> <li><a href="....">B</a> <li><a href="....">C</a> <li><a href="....">D</a> <li><a href="....">E</a> </ul> <a href="....."><img src="img.gif" border="0"/></a> </div> </div> How can I make the summary block go BESIDE the logo block and not below it! I give this 30 more minutes then I hae to use tables and get on with REAL work Similar Tutorialsok im fairly new to css and so i am working and learning from examples however i would like to know how one would go about changing the following table to a CSS layout using divs. Code:
<table style="margin: 0 auto" cellspacing="1" cellpadding="2">
<tr class="gen_small" style="height:50px">
<td align="center">{FORUM_OPEN}</td>
<td width="100">Open Forum</td>
<td align="center">{FORUM_LOCKED}</td>
<td width="100">Closed Forum</td>
<td align="center">{FORUM_NEW}</td>
<td width="100">New Posts</td>
</tr>
</table>
I'm teaching myself CSS and enjoying it, but I run into problems every now and then that I'm having troubles with. In my table I call <td class="corner">, but the bgcolor tag I set in my CSS sheet is not being picked up. I've run my code through the validator and it tells me that my line Quote: property bgcolor doesn't exist : #666666 This is my CSS code: Code: td.corner {
bgcolor: 666666;
height: 30px;
width: 15px;
}
I've played around with this, it seems simple but can't see what I'm missing. ANy help would be appreciated! Thanks! Hello Everyone, I have created a site that was started as one large graphic. I used CSS, a fixed width 3 column layout, and the site is breaking in IE6 and IE7. It is rendering fine on the PC in Netscape 6, 7 and 8; Opera 9.10 and Firefox 2.0.0.4 and on the Mac in Netscape 7.2, Safari 2.0.4, Firefox 2.0.0.2 and Opera 9.10. My simple question is this: is there any way to get this site to render properly in IE 6 (btw, when I upgraded to IE7, in the About IE7 dialog it says IE6...) without having to use hacks? Is it my code even though everything validates? Or is it IE?? I would rather not use hacks and have been thinking about sending IE users to a page asking them to download another browser because I really don't want to create another site just for IE users and I don't know where to begin with the hacks. It just seems strange to me that the browser that most people use in the country doesn't render a validated site correctly... Any comments will be helpful. Thank you! Jen Address of site: www.berkleecitymusicnetwork.org Hi... I was just wondering.. when u have something like: margin:5px 10px which side does the 5px and 10px apply to? thanks in advance I am learning CSS and started to like it I was trying to make an image gallery so was just playing around with this link I got Please see this click here When I added five more images in this, the last images ceases to display How can I correct that I was testing this by adding this code 5 times <li> <a href="#nogo"> William Turner<br /> (1775-1851) <span> <img src="../img/turner.jpg" alt="painting" title="painting" /> This English painter was one of the greatest romantic interpreters of nature in the history of Western art and is still unrivaled in the virtuosity of his painting of light. </span> </a> </li> I was anticipating that a scrollbar would come automatically in the browser but that dint happen What should I do? San Hello ;> Basicly I'm trying to make several <p>s, that are situated 1 under the other. Each of them must hold 1 image that is on the LEFT side, so the text of the <p> will be on the right side of the image. [image] text <p> <img /> </p> thats how i did it. However when i put float: left, to the image as to fix it the IMG from the <p> below the 1st <p> overlaps the other so i tried and made a <div> between the <p>s with clear:both The problem with that is that IE leaves space between the <p>s while FF and Opera doesn't. Any way to fix that? Or a more correct way to do it ? Thanks! I never usually code my layouts and test for validation (which after this I see they would fail horribly), even though it displays right theres so many mistakes. I finally got my layout to pass validation in HTML 4.1, but some things went wrong. First heres the links: (and yes this does involve CSS): http://65.26.50.204/ec/index.php - My Layout (View Source) http://65.26.50.204/ec/stylesheet.css - The CSS One thing I was told to do is take out height="100%" but it only told me to take it out in some places and not otheres... strange. Anyways how do I get it to stretch 100% with CSS? Second question, is it a bad practice to use a lot of css classes, I mean like if I have a CSS class used only once is that bad? Does it even matter how many I use?... it wont delay page loading time will it? Third question, I was told to remove the cellspacing tag in most of the places, is that not used anymore or what? Hi really nw to using css just starting out today lol. So i was wondering how i can get the two divs mod1 and mod2 to sit side by side and expand the advBar div height when more and more content gets added to both divs, rather than me specifying a height and floating the two divs inside the advbar div ? any ideas would be great. unless ive lost yas. Code:
<body>
<div id="level0">
<div id="level1">
<div id="topBar">This is the top navigation bar.</div>
<div id="advBar">
<div id="mod1">2323 frwef sdf</div>
<div id="mod2">s dfs dfsd fsd fsd f</div>
</div>
</div>
</div>
</body>
Code:
body {
margin:0px 0px 0 0px;
padding:0;
background:#FFF;
}
#level0 {
background:#FC0;
}
#level1 {
padding-left:9px;
padding-right:9px;
margin-left:300px;
margin-right:300px;
background:#FFF;
}
#main {
background:#CCC;
}
#topBar {
padding: 10px;
background:#FC0;
}
#advBar {
padding: 10px;
height: 90px;
background:#FFF3AC;
}
#mod1 {
border: 1px solid red;
float: left;
padding: 10px;
background:#FFF3AC;
width: 45%;
}
#mod2 {
border: 1px solid red;
float: right;
padding: 10px;
background:#FFF3AC;
width: 45%;
}
I'm just trying to run an 8-pixel high blue bar across the top of my pages. Looks fine in Safari and Firefox. But appears to be 20+ pixels high in IE. Any ideas? Here's my CSS file. See #header. Thank you for your help! Code: * { font-style: normal; font-weight: normal; text-decoration: none; text-align: left; text-indent: 0; margin: 0; padding: 0 }
body { color: #333; font-size: 1em; font-family: "Myriad Pro", "Myriad Web", "Lucida Grande", "Trebuchet MS", Tahoma, Helvetica, Arial, sans-serif; line-height: 1.5; background: #fff url("../images/back_scrabble_tiles.jpg") no-repeat left 9px; padding-right: 0; padding-bottom: 30px; padding-left: 0 }
a { text-decoration: underline }
a:link { color: #369 }
h1 { font-size: 2.4em; letter-spacing: -0.05em; margin-top: 10px; margin-bottom: 20px }
h2 { font-size: 1.8em; margin-top: 20px; margin-bottom: 20px }
h3 { font-size: 1.2em; margin-top: 20px; margin-bottom: 20px }
#header { background-color: #276da3; height: 8px; border-bottom: 1px solid #fff }
#content { margin-top: 44px; position: relative; overflow: hidden }
#maincontent { margin-right: 48px; margin-left: 450px }
#maincontent h1 { font-size: 2.4em }
#maincontent h3 { color: #276da3 }
#maincontent b { font-weight: bold }
#maincontent i { font-style: italic }
#maincontent ul { padding: 20px }
#maincontent #photo { float: right }
#contactform { line-height: 1.2 }
#sidebar { width: 404px; float: left }
#sidebar #logo { padding-top: 240px; padding-bottom: 32px; padding-left: 32px }
#sidebar #navigation { margin: 10px 0; padding: 0; width: 400px }
#sidebar #navigation ul { list-style: none }
#sidebar #navigation li a { color: #949576; font-size: 1.2em; font-weight: bold; text-decoration: none; background: #fff; text-align: right; display: block; padding: 8px 10px; height: 20px; border-bottom: 1px solid #e5e7cd }
#sidebar #navigation li a:hover { color: #797a58; background-color: #ebecdd }
#footer { margin: 24px 8% 12px 36%; padding: 12px 0; clear: both }
#footer * { font-size: 0.9em; text-align: center }
I have looked on countless web pages for help with positioning a image using CSS. I have a logo that I want to appear in the middle of the page regardless of what sized browser the person is using so basically ro replace the <center> tag. I know all about aboslute positioning etc but this means it will not ajust with the size of the browser. Can anyone help me to just position an image in the middle of a page using purely CSS? Thanks Hi, I see something like this, span.small { font-size: 10px; font-family: Arial, Helvetica, sans-serif; color: #666666; } <span class="small"> my question is why they put the word span. Why not do .small { font-size: 10px; font-family: Arial, Helvetica, sans-serif; color: #666666; } <span class="small"> Ok, I bought the manual on css but still can seem to resolve what I am sure is a simple issue for someone out there. Please browse to http://tmh.netdbs.com/turnkey You see the left column, I put a red background color in just to troubleshoot, the div it is specifying the color for should ALWAYS stretch to pages bottom? What is going on here? I can't get it to do that? Thanks so much. I set the height to 100%??? Tom i was wondering if someone could help me with my problem.. i would like all font on my page to be: size: 10px font: verdana ive tried to do this in css but to no hope..can someone help thanks Im trying to position 3 divs like in this image the html will look like this: Code: <div id="container"> <div id="rightGrey></div> <div id="blueContent"></div> <div id="leftGrey></div> </div> how will the css look like ? Hi, Does anybody know how i can have an image that switches to another image on rollover and also has a link? Thanks For some reason I seem to be having some trouble creating a simple border at the top of my page. Can anyone please advise me of a simple solution. The kind of thing I want to create is the one on the top of google.co.uk which simply spans the top of the page. Many thanks in advance for any help.. JD i have three relatively simple questions -- i want to put thumbnails on my page inside the main container-- (2 column layout) i have used some code from REAL WORLD its close but not quite there-- also the thumb sizes will be different - they are stamps- like postage stamps so some horizontal and some square -- just need a tweak here also i have a gray line running thru the site--- not sure where it is coming from but i think it might be from the link container on the sidebar-- and speaking of side bar list container-- i would like it to be centered instead of up against right side-- i played with margins and padding - i am still wading thru that concept-- but coudlnt get anything to work--- so i SURE WOULD appreciate help on these three items -- many thanks in advance-- here is link to page THE PAGE here is link to CSS CSS I loaned my CSS book to remote colleague si I can't look at it. I have a simple td.BLUEBG {background-color: #0000BC; color: #FFFF00; font-weight: bold} now I want to put <a href=""">xxx</a> stuff in those TD's and I want them to be yellow too. I tried td.BLUEBG A:link {color: #FFFF00; text-decoration: none} and now some of those links turn yellow and some don't. Here is a snippet of my generated code: <tr> <td class=BLUEBG>Controls</td> <td class=BLUEBG>Last edit</td> <td class=BLUEBG>Approved by</td> <td class=BLUEBG><a href="xxxxxxxx.php?sortby=Manufacturer">Manufacturer</a></td> <td class=BLUEBG><a href="xxxxxxxx.php?sortby=Description">Description</a></td> <td class=BLUEBG><a href="xxxxxxxx.php?sortby=Code">Code</a></td> <td class=BLUEBG>Comments</td><td class=BLUEBG><a href="xxxxxxxxx.php?sortby=Submitter">Submitter</a></td> </tr> |
|||||||