|
CSS - Site Redesign, Blog Right Nav Now Off In Ff
Hi 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 Similar TutorialsHello 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 hi there! i got some trouble in using div for my blog... i think my problem is somewhere here...but i still can't figure out! Code:
<!-- Content Box -->
<div id="content" style="width: 366; height: 393; font-family: tahoma; font-size: 8pt; color: #FFFFFF; font-weight: normal; z-index: 3; line-height: 14px; overflow: auto; position: absolute; left: 519; top: 117; background-color: transparent; border: 0px solid #000000 padding: 13px">
</div>
<!-- End -->
<!-- Menu -->
<div id="menu" style="width: 100px; height: 80px;
border: 0px solid #000000;
font-family: tahoma; font-size: 8pt; color: #ffffff;
font-weight: normal; z-index: 3; line-height: 14px;
text-align: justify; overflow: hidden; padding: 13px;
position: absolute; left: 350px; top: 135px; background-color: transparent;">
<div style="cursor: move; font-family: tahoma; font-size: 8pt; font-weight: normal; color: #ffffff; width: 74px; length: 87px; background-color: "transparent"
onClick="document.getElementById('content').innerHTML=document.getElementById('rant').innerHTML" transparent">
<p align="center"><font color="#CC0099">:</font><font color="#FFCC99">: bLog :</font><font color="#CC0099">:</font
</div>
<div style="cursor: move; font-family: tahoma; font-size: 8pt; font-weight: normal; color: #ffffff; width: 74; height: 12"
onClick="document.getElementById('content').innerHTML=document.getElementById('profile').innerHTML"
<p align="center" transparent"><font color="#CC0099">:</font><font color="#FFCC99">: profiLe :</font><font color="#CC0099">:</font>
</div>
<div style="cursor: move; font-family: tahoma; font-size: 8pt; font-weight: normal; color: #ffffff; width: 80; height: 14"
onClick="document.getElementById('content').innerHTML=document.getElementById('shout').innerHTML"
<p align="center" transparent"><font color="#CC0099">:</font><font color="#FFCC99">: sHout oUt :</font><font color="#CC0099">:</font>
</div>
<div style="cursor: move; font-family: tahoma; font-size: 8pt; font-weight: normal; color: #ffffff; width: 74; height: 13"
onClick="document.getElementById('content').innerHTML=document.getElementById('blogsters').innerHTML"
<p align="center" transparent"><font color="#CC0099">:</font></font><font color="#FFCC99">: bLogsters :</font><font color="#CC0099">:</font>
</div>
<div style="cursor: move;
font-family: tahoma;
font-size: 8pt;
font-weight: normal;
color: #ffffff;
background-color: "transparent"
onClick="document.getElementById('content').innerHTML=document.getElementById('info').innerHTML"
<p align="center"><font color="#CC0099">:</font><font color="#FFCC99">: bLog info :</font><font color="#CC0099">:</div>
<!-- End -->
<!--Content Proper -->
<DIV id=rant div class="blog" style="display:none;" >
<p align="left">
<Blog>
<DateHeader>
[date]
<p align="left"><br>
</DateHeader>
<b>[blog title]</b><br><br>
[body]
<DIV CLASS="exte">[extended entry]</DIV>
<DIV CLASS="extk">[extended keywords]</DIV>
</p>
<p align="left">
<em><br>
</em>
[author] grooved at
<em> [time]</em><br>[comments] [permalink] <br>
__________________________________________<br>
<p align="left">
<br><br><br>
[comment data]</Blog>
<table width="98%" align="center">
<tr>
<td width="33%">[previous page]</td>
<td width="33%" align=center>[bloghome]</td>
<td width="33%" align=right>[next page]</td>
</tr>
</table>
</div>
you can check the rest of the code at my test page: URL thanks in advance!!! Hello, I used to run a blog at vritti.net which I took down completely and am nearing the final steps in finishing off the new product. A peek can be had at what is coming at http://www.vritti.net/mt/main I want to make 2 aesthetic changes to the main text area ? 1. Give the text some space to breathe in and 2. Encase the text rectangle in a rounded rectangle so that it gives something solid for the racquet (and other randomly generated images) to lean on. I request you for this help. Thank you. ciao, abhi C I have a b2 evolution blog that I'd like to alter a bit. I'd like to be able to widen the area where the content is displayed so there isn't so much wasted space on each side. How would I go about doing this? If you need to see the site: http://www.foreverpurple.com/blog/crab_blog.php Hi, I am importing a Word Press blog to a web site, but it looks kind of sloppy. You can see it here : What I need to do is just present the title, and maybe the first 100 characters, then have a "read more" link. Once this link is clicked, the full article will show on the same page. I think I might need to use a JavaScript library as well, but I know I will need some CSS. If someone could give me a general idea of how to go about this, I would appreciate it. Links and resources are also welcome. thanks OK, first off from a bad experience on another CSS Forum , I will have to begin with a disclaimer: The blog you're about to view is my original content. I did not steal this work. I did however use Photoshop brushes that were made by others to create my work. The credit is properly given to those people on my active blog. The blog that I'm having CSS/HTML problems with is INCOMPLETE, so you will not see any credits their yet. It is NOT MY REAL BLOG. I change the template there about every month with new experiements. It's sad that I have to take up so much time to write a disclaimer because too many people out their jump on the "YOU PLAGIARIZER - YOU DID IT" bandwagon. So, I was told by a very presumptious group of forum members to write a disclaimer in the future. Whew! Now that I got that outa the way......... I need help. This is the site I'm having trouble with. Main Index Template Sidebar Stylesheet I've been working on this same template for a week now. I'm not the type to ask for help. I'm very stubborn and prefer to do things on my own because it's usually faster and easier. But now I'm tearing my hair out - not able to figure out what I'm doing wrong. My blockquote is bleeding off the screen. I'll start with that for now. I've tried div's, widths, margins, paddings. Believe me, I've toyed with every possibility out there. Not only that, but I can't tell you how many "CSS/HTML" (including the w3 schools) help pages I've read out there. None of them have supplied what I need to know to fix my layout. If any of you have the slighest clue, please help. I'd really appreciate it!! Hi everyone I am running a blog that uses xhtml and css style sheets to generate templates. I have about 10 templates that I would like to switch to and from. I want to add a banner on the bottom of the page, but I cannot figure out how to do it correctly. If I add it to the footer templates, before the </body> tag, it does not always come out correctly. Sometimes it the banner ends up in the 3rd column over to the right, sometimes the banner is obscured by the body of the main column. I am trying to find a way to forcefully push the banner to the bottom of the page, below all of the text that is generated. I was thinking that perhaps javascript could be used to force a banner underneath, but I am not too familiar with the sort of code that is in my blog. any ideas? thanks Roy Hello nice people. I'm new and excited to be here. My footer that is supposed to be placed at the bottom of my content and sidebar is placing it self about 600px or so below instead, causing a ridiculously long scroll down with a huge empty space in between the posts and the footer. Just looks awful. I can't figure out what's 'causing the problem. How do I fix this? I think the problem lies in these set of CSS, but I could be wrong... My blog is: thetissuetalk (at) blogspot (dot) com Code: /* Outer-Wrapper
----------------------------------------------- */
#outer-wrapper {
width:1000px;
margin:0px auto 0px;
padding:8px;
text-align:left;
}
#content-wrapper {
width: 1000px;
}
#main-wrapper {
float: left;
word-wrap: break-word; /* fix for long text breaking sidebar float in IE */
overflow: hidden; /* fix for long non-text content breaking IE sidebar float */
margin:30px 250px auto 115px; padding:0 120px 0 0;
}
#sidebar-wrapper {
width: 220px;
float: right;
word-wrap: break-word; /* fix for long text breaking sidebar float in IE */
overflow: hidden; /* fix for long non-text content breaking IE sidebar float */
position:relative; top:-6600px; right:40px; padding:20px 20px 0px 5px; width:220px; color:#333; background:#F0F0F0; font:normal 12px/14px "Trebuchet MS","Lucida Grande","Lucida Sans Unicode",Arial;
}
#menu { width:167px; margin:0px 0 40px 30px; padding:0; text-align:center; }
#menu ul { padding:0; margin:0; }
#menu li { font:bold 12px/14px Arial,Helvetica,"Trebuchet MS"; letter-spacing:2px; list-style:none; margin:-3px 0; padding:5px 0; }
#menu li a, #menu li a:visited { display:block; color:#FAFAFA; background:#D0D0D0; text-shadow:0 0 4px #FAFAFA; margin:0 2px 0 1px; padding:5px 5px 4px 5px; border:0; text-decoration:none; text-transform:uppercase; -moz-border-radius:8px; -khtml-border-radius:8px; -webkit-border-radius:8px; border-radius:8px; }
#menu li a:hover { color:#fff; background:#C5C5C5; text-shadow:0 0 3px #B5B5B5; }
#menu .current_page_item a, #menu .current_page_item a:visited { color:#fff; background:#C5C5C5; text-shadow:0 0 3px #B5B5B5; }
#menu ul ul li { margin:3px 2px 0 10px; padding:0; line-height:11px; }
#menu .rss a, #menu .rss a:visited { color:#B3B3B3; background:#ddd url(http://2.bp.blogspot.com/_k_DnmK4oz2Q/S1u4oxWZhnI/AAAAAAAAAkQ/rkns3Lq9mC8/s1600/rss.png) no-repeat 37px center; text-shadow:0 0 0; padding-left:20px; }
#menu .rss a:hover { color:#A9A9A9; background:#E7E7E7 url(http://2.bp.blogspot.com/_k_DnmK4oz2Q/S1u4oxWZhnI/AAAAAAAAAkQ/rkns3Lq9mC8/s1600/rss.png) no-repeat 37px center; text-shadow:0 0 0; }
Thanks! Hi, I have modified a form for a web blog for a friend, and got extra fields included for them. But we have an issue on the pc with internet explorer and the position of the elements in css. On safari and opera and firefox, all the labels for the form tags line up correctly, but on internet explorer they do not, the message label is lined up with the address, how can we fix this. If you look at this page: http://website-traffic.inpress.co.uk/contact-us/ You can see what we mean with the form. How can I fix this problem with the css to get them all correctly lined up. Many thanks Barry I'm relatively ignorant about css and html, but I've faked my way along so far. But I've encountered a problem. I designed a style for a blog on LiveJournal, and it looks OK there. (http://www.livejournal.com/users/javajed/). I've also put a small bit of JavaScript in my website to embed my blog there. (http://www.jaredvoss.com/). On my website, the embedded blog is all screwy. All three DIVs should be contained within the scrolling layer, but only two of them are. Originally the sidebar DIV was even hidden behind the layer it's embedded in (I brought it forward using a z-index code). It seems like the sidebar DIV is taking it's position cues from the main body of my site, while the other DIVs are taking their position cues from the layer they're embedded in. I want all three DIVs to be aligned as they are on LiveJournal, and contained within the scrolling layer on my website. Any ideas? I've tried using wrapper divs and container divs (maybe not correctly) without success. Thanks for any help! Looks fine in all other browsers (of course). http://sports.theedgenews.com For some strange reason the last half of the blog blows up in IE6 and IE7. It simply does not show up. Why we don't know. When looking at the source code, it "gets" the whole page, it's just the last half is not rendered. A copy of the css is here. http://sports.theedgenews.com/css.css If anyone has any ideas at all on what to do, it would be greatly appreciated. Btw this is a design not made by me. I have become pretty familar w/ it for the blog but I have not written it. Thanks for any help. I'm trying to add tables to page in my Wordpress blog, and when I publish, there is TONS of white space between the previous paragraph and the table. It appears the more rows I have in the table, the more white space there is. Which makes me suspect that it might be something to do with the CSS stylesheet. Any ideas on how to solve this? In case you need it, the tables are about half-way down on this page: dominatelocalrankings.com/skeptical TIA for any help, Tom First I am a copy/paste kinda chick w/ not a lot of experience but I do know enough to know that if you want something to look a certain way or act a certain way, there is someone out there saavy enough to get it right :-) On my LiveJournal blog, my style that I am using has the individual userpics/icons by default aligned to the left w/ text right up next to it and wrapping around it. I would like it to by default w/ hopefully some css code, to automatically be beneath the icons. Currently I'm simply inserting br tags (hitting the enter key) when I post a new entry to force my text beneath the icon but I know there must be a way to force it to do what I want it to. The folks at LJ are NOT very helpful and they have this funky layers thing going on as opposed to simply wysiwyg or blank html/css coding pages. You have to learn their system before you do any altering but they do have a place for just adding simple css code changes. First, is this possible and second can someone pleaasseee help? Thanks so much in advance!!! Oh the url is: http://nitamcgrew.livejournal.com/ Hi there, I have run out of ways to figure out this problem. I have incorporated a Blog into my website: http://www.kohlrbaby.com/blog/ It works fine in IE but not in FF. For some reason the the #contentHolder is not reading the #leftcontent and is not extending. If I try adding height: 100%; this corrects the problem for the blog page, but messes up the look of the rest of my site. Any suggestions? Help greatly appreciated!!! Here is the applicable css code: #contentHolder{ PADDING-TOP: 0px; PADDING-bottom: 30px; PADDING-left: 0px; PADDING-right: 0px; BORDER-RIGHT: #000000 1px solid; BORDER-Bottom: #000000 1px solid; BORDER-LEFT: #000000 1px solid; MARGIN-LEFT: auto; MARGIN-RIGHT: auto; WIDTH: 650px; POSITION: relative; BACKGROUND-COLOR: #ffffff; text-align: center; } #leftcontent p { padding: 10px 30px 0px 30px; line-height: 1.75em; text-align: left; } #rightcontent p { padding: 10px 30px 0px 30px; font-size:10px; text-align: left; line-height: 1.75em; } #leftcontent { float:left; width: 65%; background:#fff; margin-right:15px; padding-bottom:20px; BORDER-right:#000000 1px solid; POSITION: relative; } #rightcontent, #leftcontent { padding: 10px 30px 0px 30px; line-height: 1.75em; text-align: left; } h3{ line-height: 1em;} #rightcontent { line-height: 1em; } #rightcontent ul{ list-style: none; text-align: left; font-size:10px; } #rightcontent ul li { margin-bottom: 5px; } .post { border-bottom: 1px solid #000; padding-bottom: 3px; } I'm creating a website in html/css, and I hope this is the correct forum for this issue. I'm not expecting anyone to explain exactly how to do this, but maybe just a point in the right direction as I haven't been able to search for this correctly. Essentially I currently have a list of news items on the front page of my site. I want there to be a small indicator beneath each of these news items that says "comments (#)" where # is number of user comments about that news item. If this is clicked it would take the reader to a different page with the full news article and below it a list of the comments. It seems like some kind of wordpress implementation might work here but I have no idea where to look for something like this. Sorry if that was a little hard to understand, but I can't post urls yet to help explain. Thanks in advance! Hiya, im trying to place a blog inside a table and also have a picture above the table and some links. In Mac Firefox and Camino it works perfectly. but in IE or Safari it just doesn't want to work. Please help Thanks guys Sorry I can't be more descriptive about my problems, but I am really not that great at CSS/PHP/coding in general. I barely passed my Matlab/C++ class freshman year of college, lol. Anyway...my friend and I just started a blog but neither of us know anything about CSS. I followed a tutorial for creating Wordpress Themes using PHP and CSS. I've been working on the blog (hosted locally) for a while now, and finally decided to FTP it to my host server to do the browser snaps on it, etc. thepennydreadful.com That's the URL and right now there is a gigantic white gap between the footer and the container....I thought if I adjusted the padding it might fix the problem because that's how I fixed it when there was a gigantic white gap between the header and the container...but yeah. I've heard from my friend that in his browser (latest vers of firefox) that the sidebar doesn't go to the side like it's supposed to either. I'm using the latest version of Google Chrome, if that matters. Any help or suggestions on how to fix the problem would be greatly appreciated. I've been following the W3 school's pages on CSS too, but I haven't had any formal instruction on CSS so most of what I am doing is pretty much just poking around in the dark. :'( PS: I did validate my CSS like it says to do in the sticky at the top of the forum page and it validates alright.... Code: /*
Theme Name: The Penny Dreadful
Theme URI: http://www.thepennydreadful.com
Description: The layout for the gothic and lolita blog "The Penny Dreadful."
Version: 1.0
Author: Kate Bartlett
Author URI: http://nozomiwhitewolf.livejournal.com/
*/
body{
margin-left: 0;
margin-right: 0;
margin-top: 0;
margin-bottom: 0;
font-family: Arial, Helvetica, Georgia, Sans-serif;
font-size: 12px;
text-align:left;
vertical-align: top;
/* background-color: #29001E; */
}
div#content{
padding:180px;
width: 400px;
float:left;
}
/*Header, Container, Footer*/
div#header{
background-image: url('Top.png');
background-repeat:no-repeat;
height: 519px;
}
div#container{
background-image: url('Middle.png');
background-repeat: repeat;
margin-right: 639px;
height: 476px;
text-align: left;
padding: 1px;
}
div#footer{
background-image: url('Bottom.png');
background-repeat:no-repeat;
clear:both;
float: left;
width: 1050px;
text-align: left;
padding: 160px;
height: 360px;
}
/*
End of file.
*/
|
|||||||