bmroyer Posted January 19, 2012 Share Posted January 19, 2012 I'm attempting to start from scratch on a wordpress theme to make my wordpress blog look exactly like my website, so when a visitor clicks on my blog link, they still look like they are on my website. I have the template almost done, I still need to add IE support, as well with some other browsers. I used CSS3 and currently only have support for Chrome and Firefox. The problem:I always refresh after I change some things, but when I was trying to get 2 divs to align, I was working more quickly, changing things until I finally got it right. The problem I noticed after I finished. I've worked on it for a few hours here, rewrote the css twice, and still having the same problems. My wrapper won't reach my footer..my content and side bar all reach there max height, but the wrapper which is positioned behind them won't follow suit. Now I have a parent div element that wraps the content and the sidebar. I margin:0 auto'ed it to center the content and sidebar with the links header. I think that is when the problem started. Here is a http://zuppora.com/blog to view the blog. I know I still have to put padding and style the text, I just want to get this wrapper problem fixed. I made the "parent" content/sidebar wrapper red so you can see where it flows. To view source, use your browser, or I could post it. Thanks. Link to comment Share on other sites More sharing options...
Don E Posted January 19, 2012 Share Posted January 19, 2012 To the wrapper, try adding overflow: hidden;Adding a doctype would be a good idea as well. Link to comment Share on other sites More sharing options...
dsonesuk Posted January 19, 2012 Share Posted January 19, 2012 First major problem, no doctype defined, so its working to quirkes mode, the wrapper will not wrap any floated elements, unless overflow: hidden is used, and i would suggest using min-height: 100%; instead of height: 100%; Link to comment Share on other sites More sharing options...
bmroyer Posted January 19, 2012 Author Share Posted January 19, 2012 the doctype was the problem. I also changed the other things you suggested as well. How does it know which Doc type you use? For html 5 it has to be <doctype html> and then all versions before that were the long ones with the url. Could you use a html 5 doc type and not have any html 5 code, since the most common change they made would be the <header> <footer> <nav> <section> and so on. Link to comment Share on other sites More sharing options...
bmroyer Posted January 19, 2012 Author Share Posted January 19, 2012 also for wordwrap.. I put 10 px padding on the leftside, so its now away from the edge in the content area. But the right side I added 10 px as well, and had to take 2 % off the total width of the content div, but the end of the lines all are in different spots. Link to comment Share on other sites More sharing options...
dsonesuk Posted January 19, 2012 Share Posted January 19, 2012 Adding padding, margins will add to the width. You have two options, add inner container with margin of 10px left and right, OR give all elements used within content area a margin of 10px left and right but I would go with first, the end of text line will end in different spots, as it depend on characters used ( I compared to O) within each line, If you want the lines to end exactly 10px (except for last) from the edge, then use text-align: justify; Link to comment Share on other sites More sharing options...
Don E Posted January 19, 2012 Share Posted January 19, 2012 Could you use a html 5 doc type and not have any html 5 code, since the most common change they made would be the <header> <footer> <nav> <section> and so on.... I wonder the same thing.. ? Link to comment Share on other sites More sharing options...
bmroyer Posted January 19, 2012 Author Share Posted January 19, 2012 justify seemed to work. Thanks. Link to comment Share on other sites More sharing options...
bmroyer Posted January 20, 2012 Author Share Posted January 20, 2012 alright, new problem. This time I just used the default theme and messed with the css and added my own header and links section. I wanted to do this so I didn't have to manually add all those widgets. But anyways, the right side bar will not stay up next to the content area. Its floated to the right, and is small enough to fit in there. I tried clear:both but didn't work. I did most of this on my netbook, now that I am on a bigger computer I see that its broken. I tried to figure it out, messed with margins, widths, floats, nothing seems to work. http://zuppora.com/blog Link to comment Share on other sites More sharing options...
dsonesuk Posted January 20, 2012 Share Posted January 20, 2012 Have you fix this?, as it looked fine to me. in FF. Link to comment Share on other sites More sharing options...
bmroyer Posted January 20, 2012 Author Share Posted January 20, 2012 yeah it was a margin issue. I never knew doing a custom theme would be a nightmare. If looks ok on this computer, but my net book it squashes the nav area and moves links. When I click on my article and go to the page.php or whatever it is, the nav area is then wider than the content area, so I prolly need to search through the css for that content area and expand it. I also need to add the css3 support for IE, Opera, and safari. Link to comment Share on other sites More sharing options...
bmroyer Posted January 20, 2012 Author Share Posted January 20, 2012 and also, the right side bar I tried to expand the width so there is no gap, and it keeps breaking. Link to comment Share on other sites More sharing options...
Recommended Posts
Archived
This topic is now archived and is closed to further replies.