|
CSS - Css Help Request - Site Redesign And Stumped On A Few Css Points
Similar TutorialsHi all, Home Page. Blog page. Site CSS file here. Hi all, could I get some help? There's a few things, and if we can do one thing at a time, I'd appreciate it. Ok, item 1, and this is in Firefox. Have a look at the Home Page. Then, have a look at the Blog page. Notice on the Blog page that "Navigation" is a few pixels too far to the right, and also a few pixels low compared to the Home page. Why? They're in the same CSS class. I don't understand why the right side in the blog is off like this. I'd appreciate any advice! Thank you, Chris Hello everyone, At the moment I am trying to achieve a re-design of my website (http://www.madewithpixels.co.uk) in pure XHTML/CSS. After many hours of tweaking and a little bit of help here and there, I now have a version that almost exactly matches my original html design save for a couple of issues. I'm aiming to have a fixed sized header, 2 content boxes that fill the available height of the browser window and and a footer that sticks to the bottom of the browser, I'm so very nearly there, except somethings not quite right.... I can get the container expanding in height with the browser window no problem, by setting the height attributes in the CSS and the height of the DIV in the html to 100% height ... except it's TOO big, the footer is waaay down the bottom and requires me to scroll down to it (not what i want)....AND... it doesnt work in mozilla... so, after a bit more tweaking, I changed the %'s for em's and now mozilla works correctly... so far so good, now to get the content boxes and the footer to remain in view all the time.... easy i think, just play about with the height attributes in the CSS and the DIV and everthing should be fairly straightforward. But no! it doesnt work, whatever i do, i cannot get the main content coloumns and the footer to remain in view and fit to 100% height of the browser at the same time, I've tried every combination of % and EM's that I can think of, and can acheive both effects, but not at the same time. also, in IE I have about 10px of white above the footer that i cant eliminate... If anyone can give me an explanation as to what is happening (im sure the two problems are related) I'd be very grateful. I've been tweaking this code for two days now and am getting nowhere. i'm getting closer all the time, i just need to understand whats happening here and I reckon i'll be ready to start putting the rest of the elements in like the navigation etc Thanks very much to anyone who has the time to make a suggestion, its very much appreciated. For reference, you can see the latest version he http://www.madewithpixels.co.uk/sandbox/latest.htm cheers Mike Anyone intrested in redo'ing a site into CSS? [link removed] I just want it remade (I have all the graphics and such) I want to use CSS and style sheets to the fullest extent. LMK I have a problem that I cannot seem to resolve no matter how hard I try. - Click Here - As you can see, this page renders well in firefox but breaks horribly in IE. Try mousing over the links in the top right corner of the page and the layout really breaks! If anyone has some free time could you take a look at this page and see if any solution springs to mind? CSS: Code: body{
margin:0;
font-size:small;
text-align:center;
background-color:#c60;
border-top:3px solid #666;
font:Arial, Helvetica, sans-serif;
background-image:url(../images/background.png);
background-attachment:fixed;
background-position:bottom left;
background-repeat:repeat-x;
#content{
margin:2% 0% 2% 17.2%;
background-color:#9cf;
border:solid #0af;
border-width:2px 1px;
background-image:url(../images/bits.gif);
background-position:top right;
background-repeat:repeat-y;
}
#content h2{
color:#000;
background-color:#fdb;
border:1px solid #c60;
padding:2px;
width:100px;
margin:5px auto -12px auto;
font-weight:bold;
font-size:12px;
text-align:center;
position:relative;
}
#table_wrapper{margin:5px;}
#main_table{
background-color:#fff;
border:1px solid #999;
border-width:2px 1px;
text-align:center;
margin:0 auto;
width:100%
}
#main_table thead tr th{
height:20px;
}
#main_table tbody tr td {
font-family:"lucida grande", verdana, sans-serif;
font-size:8pt;
padding:3px 8px;
border-right:1px solid #d9d9d9;
}
#main_table tbody tr.selected td {
background-color:#fdb;
border-left: 1px solid #d9d9d9;
}
#wrapper{
border-style:solid;
border-color:#666;
border-width:5px 1px;
width:94%;
margin:25px auto 50px auto;
text-align:left;
padding:1%;
background-color:#fff;
}
#header{
height:60px;
padding-top:8px;
border-bottom:3px solid #0af;
background-image:url(../images/banner.gif);
background-position:bottom left;
background-repeat:no-repeat;
}
#nav{
height:60px;
float:right;
font-size:11px;
background-image:url(../images/notebook.gif);
background-position:right;
background-repeat:no-repeat;
}
#nav ul, #nav li{
display:inline;
margin:0 25px 0 0;
}
#nav a{color:#000}
#nav a:visited{color:#666;}
#nav a:hover{color:#c60; border-bottom:1px dashed #c60;}
#leftcol{
float:left;
width:16.5%;
margin:2% 0;
border:solid #0af;
border-width:2px 1px;
background-color:#9cf;
background-image:url(../images/bits.gif);
background-position:top right;
background-repeat:repeat-y;
}
#leftcol h2{
color:#000;
background-color:#fdb;
border:1px solid #c60;
width:50%;
margin:5px auto 0 auto;
font-weight:bold;
font-size:12px;
text-align:center;
padding:2px;
width:30px;
margin:5px auto -12px auto;
position:relative;
}
#info{
border:solid #999;
border-width:2px 1px;
background-color:#fff;
margin:5px;
padding:0;
}
#info p{margin:10px 5px 5px 5px;}
#footer{
color:#999;
clear:both;
width:100%;
font-size:11px;
text-align:center;
border-top:3px solid #0af;
}
I've got a list item with a link, an image, and a span of text and I am trying to boost the text up in that box so that it is reasonably close to vertically centered. Code: <li><a href="productpage.php" class="bigimgcap"> <img src="../images/products30.gif" alt="Software logo" /> <span>Product Name</span></a> <ul> <li>Product Feature 1 </li> <li>Product Feature 2</li> </ul> </li> my css wasn't helping, probably have inherited properties issues all over this one eh? Code:
.bigimgcap {
font-size:1.1em;
font-weight:bold; color: #000080; /*replaced SteelBlue*/
margin: 10px 0;
padding:0;
}
.bigimgcap span {
padding:0;
margin: 0 0 15px 15px;
}
How do I prevent my bullet points overlaying the image? When the image is floated to the left, strange things happen to the <li> items. They seem to ignore the image. This will probably make more sense if you try the code below with an appropriate image. I can get around this problem by using table formatting, but I am trying to learn a CSS alternative. Here is the 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>
<title>Untitled Page</title>
</head>
<body>
<p>Hello</p>
<ul>
<li>List 1</li>
<li>List 2</li>
<li>List 3</li>
</ul>
<img src="http://www.selestial.com/resources/image2.jpg" alt="any old image" style="float:left;"/>
<p>Hello</p>
<ul>
<li>List 1</li>
<li>List 2</li>
<li>List 3</li>
</ul>
<p>Hello</p>
<ul>
<li>List 1</li>
<li>List 2</li>
<li>List 3</li>
</ul>
</body>
</html>
I have a container, header,left-side vertical navbar, content, and a footer. Everything works fine except when the content div is very wide. When this happens the header and footer are only as wide as the screen and not as wide as the content div. Here's my CSS. Code:
#container {
width:100%;
background: #fffce0 url(images/narrowtrick.gif) repeat-y;/*this colour will be left column colour */
margin:0px;
padding:0px;
text-align:left;
}
#header {
height:145px;
width:100%;
background-image: url(images/topbackground2.jpg);
text-align:center;
margin:0px;
padding:0px;}
#navbar{
float:left;
width:122px;
margin:0px;
padding:0px;}
#content {
background:#fffce0;/* background colour of right column */
margin-left:122px;/*this is the space for the left column */
padding:0px;
}
#footer {
clear: both;
border-top:1px solid red;
border-bottom:1px solid red;
background-image: url(images/gradientsmaller2.gif);
font: 10pt;
background-color: #ccffcc;
width: 100%;
text-align: right;
margin:0px;
padding:0px;
}
I can't figure this one out! Code: <div id=container> <div id=header> </div> <div id=navbar> </div> <div id=content> </div> <div id=footer> </div> </div> the content div is dynamic so it could be very wide. It's my fault for not checking IE after every change but somehow a div stopped stretching and I can't find the problem. Works great in FF but not in IE 6 or 7. Here's the problem page It just doesn't make sense to me. Am I missing a hack maybe? Hello everyone, I have a fairly basic CSS question to ask, but since I'm new to CSS, I'm a bit stumped. If you check out my Blog (at http://goblinsatemyblog.com), on the sidebar you'll see that the menu hovers are colored green. However, on a few of the widgets displayed, rolling over the menu truncates the link down a few pixels, which doesn't look that great. I applied "display: block" tags and a background color to the widgets to create the rollover, but some still work properly and others don't. What do I need to do to keep the rollover links from acting up? Here's the code pertaining to the two CSS files in the theme. Code: .custom li.widget li a:hover, .custom li.linkcat li a:hover { display: block; padding: 0 0 0 0.3em; color: #fff; background: #009933; }
Code: #rss { width: 20em; height: 190px; margin: 0 0 1.0em 0; background: url('images/rss.png') 50% 0 no-repeat; text-align: center; }
#rss a { display: block; width: 202px; height: 184px; margin: 0 auto; }
ul.sidebar_list { list-style: none; }
ul.sidebar_list li.widget, ul.sidebar_list li.linkcat { width: 16.6667em; margin: 0 0 2.8em 0; font-size: 1.2em; line-height: 1.6667em; float: left; border-bottom: 2px solid #009933; }
li.widget p { margin: 0 0 1.66667em 0; }
li.widget ul, li.linkcat ul { list-style: none; margin: 0 0 0.8333em 0; }
li.widget li, li.linkcat li { padding: 0 1.0em 0 1.16667em; background: url('images/bullet.gif') 0 0.4167em no-repeat; }
li.widget li a:hover, li.linkcat li a:hover { color: #575757; }
I picked out the part of the CSS files that I think are relevant, but I can past the entire code if requested. Thank you in advance! I'm trying to create a (I think) simple page for an art gallery's artists. You can visit artizansc.com/dev/artists/artists.htm. I have created classes in my css for the artists' pictures (biopic), names (H2) and bio (biotext). I have also created a class called biowrapper to wrap each person's info. As you can see, the pictures are not lining up. It seems this should be simple and frankly, I'm feeling stupid. I'm new with CSS, but this shouldn't be rocket science! Can anyone please help me? Hey guys, I usually have a friend that helps me slice up my templates and write the CSS and some html for my sites, however he's been MIA and I can't seem to figure this out. I've followed several CSS slicing guides, but the templates used are far simpler than the template I'm trying to make happen. I'm wondering if anyone would be willing to slice this up for me and do the basic coding for it! Haha I'm seriously at a loss. Thank you for your time! this was my target I got a image with two transparant shapes. Behind those shapes I would like to show 2 other images. |-------1-------| | |-----| |----| | | |...2..| |..3..| | | |____| |____| | |_____________| Image 1 should be on top z-Index Image 2 should under image 1, a part of the image should be visible. Image 3 should under image 1, a part of the image should be visible. Image 2 and 3 should be dynamically replaceable. My solution The image in front has transparant spaces at 20,40 and 20,120 both 60,60 sized. Each Image do have a offset, in case a part of the image should be displayed not starting from 0,0. Code: This is a drawing. _____1_____ | _____ | | | | | | |..2..| | | |_____| | |__________| 1. whole image ( should be bigger then 60,60 ). 2. the part that I want to show ( 60, 60 ). With javascript I can hide/unhide the images and I use the imageLn or imageRn as selector id I hope you can use it also. My Style Code: #headerContainer {
float: left;
position: relative;
z-index:4;
width: 200px;
height: 100px }
#headerImageLeft {
position: absolute;
z-index: -1;
top: 20px;
left: 40px;
width: 60px;
height: 60px;
display: inline }
#headerImageRight {
left: 120px;
top: 20px;
width: 60px;
height: 60px;
z-index:-2;
position: absolute;
display: inline;
}
Html code Code: <td> <div id="headerContainer"> <img src="header-kop-test.gif" alt="" width = "200" height="100" /> <div id="headerImageLeft" > <div id="imageL1" style="top:-8px;left:-20px;position:absolute;"> <img src="header-links-test.gif" alt="" /> </div> <div id="imageL2" style="top:-10px;left:-10px;position:absolute;"> <img src="header-links-test2.gif" alt="" /> </div> </div> <div id="headerImageRight" > <div id="imageR1" style="top:-30px;left:0px;position:absolute;"> <img src="header-rechts-test.gif" alt="" /> </div> <div id="imageR2" style="top:-10px;left:-18px;position:absolute;"> <img src="header-rechts-test2.gif" alt="" /> </div> </div> </div> </td> My questions: Can I optimize this code? Is this working on the most browsers? or are there know issues? Greetz and thanks R Upon initial load, you see a red block over the images. Why does it do that and how can I fix it? http://www.kubicle.com/beta/ Hi Any comments, especially CSS wise would be muchly appreciated... URL One thing I did notice was that when you click on a link to go to a page with more content that the one you were on before, that the entire layout shifts...any ideas anyone? thanks! Modo Hi, I am working on moving my tables based site to a tableless css layout. I just wondered if anyone out there could please help, by viewing my site with a Mac, to see if the header image appears. The URL is: http://www.jimpix.co.uk/ecards2/default.asp Another site I made for someone has a header image, defined via the 'background' css property for one of the DIVs, and I have been told it doesn't appear on a Mac. That site is: http://www.somewhereinbetween.biz/ I am concerned my site will suffer from the same problem with a Mac. It looks okay in IE and Firefox. Thanks Jim Hey here's the address to my first site using Css layouts. http://funnyguys99.tripod.com/index.htm Please help me fix the logo so it adapts to different resolutions, and I can't figure out how to get that blue bar to the very bottom?!! Please help I'm a big newbie Hey all. I have not done a great deal of web development, and whatever I have done has been with tables. I have seen a great many debates on the whole table vs div topic, and so this time thought I'd put together a site with divs + css rather than tables + css. so I have a few questions. here is the very simple code I've got so far. Code:
<?php include("header.php"); ?>
<div id='container'>
<div id='header'>
Header
</div>
<div id='rootmenu'>
menu
</div>
<div id='docbody'>
<div id='content'>
content
</div>
<div id='sidemenu'>
side
</div>
</div>
</div>
<div id='footer'>
Footer
</div>
<?php include("footer.php"); ?>
and the css file: Code:
html, body
{
height:100%;
}
#container
{
width: 100%;
height: 100%;
margin: 0 auto 0 auto;
margin: 0px auto 0px auto;
}
#header
{
height: 10%;
width: 70%;
background: #000;
margin: 0px auto 0px auto;
}
#rootmenu
{
width: 70%;
background: #fff;
margin-bottom: 5px;
margin: 0px auto 0px auto;
}
#docbody
{
width: 70%;
height: 85%;
padding: 0px;
margin: 0px auto 0px auto;
}
#content
{
height: 100%;
width: 80%;
background: #45f;
float: left;
}
#sidemenu
{
height: 100%;
width: 15%;
background: #56f;
float: right;
}
#footer
{
width: 70%;
background: #333;
margin: 0 auto 0 auto;
}
most of this is based on code I've been looking at on sites like oswd.org. I would just like to know that I'm on the right track with my divs and css before putting too much work into the site. it always sucks to realise a serious design flaw at a later time. so please, could I get some suggestions on what I need to change and any important things I should know? cheers. Hey guys. I've been looking for this site that I should have bookmarked when I found but have lost. I can TRY and describe it as best I can. The main background color was white with, depending on the style you've set, a glass of wine or mug of beer fairly large in size and with a low opacity. The styles were simple. Purple or yellow. Wine or beer. Mostly black text. I forget how it was you were able to change them, but he used it in some examples. The menu had list items similar to the naving convention: liquid 2 column nf fixed 3 column nfnh liquid/fixed 3 column etc. The header was the whole wording of whatever the menu items were. Each page he showed examples using css, xhtml and sometimes javascript with the code on the page. At the bottom of each example it had a group for user comments. Some were empty. I don't remember any logos at all on the site other than the wine and beer. I think the url was something like: www.site.com/nameNO~/ I found it the same day I found the "seabold why tables are stupid" site. I remember reading a solution to a problem that I've encountered but I don't remember the code, I was just skimming the site. I tried finding other solutions, or the same solution somewhere else with no luck. Thanks |
|||||||