A link to my page: My Page
For debugging purposes I have set CSS background colors for the 3 sections of my page. The "Zine" should have background of red, the "Book Cover" should have a background of "green", and the "Magazine" at the end should be "Yellow".
For some reason the background of red is only getting applied to a very small portion of the "Zine" section, all the images and text in the Zine section should have background red but most of it is coming up green.
Also if you notice this is on a 960 grid layout, and in the Book section (which should be green background) I have a h1 Book Jacket> tag, which you will actually see the text Book Jacket on the outside of the 960 grid (right side of page to the top right of the image of David Carson)
Edit: Found solution:
I changed the following code:
<article class="container_12">
<section class="zine">
To:
<article>
<section class="container_12 zine">
I think this fix works because the section class "zine" wraps the entire contents of what should have been red background. This eliminates need for a clear fix, however the clearfix suggested by others also works.
The height of .zine is collapsing. This happens because it contains floated elements which aren't cleared. There are quite a few methods of clearing floats. I'd recommend using one (or both) of the following two methods:
The "clearfix hack". Simply add the CSS rules from this page to your CSS docuement and add the class "cf" (or whatever) in addition to the class "zine".
Or, overflow: hidden. Basically, just add overflow: hidden to the "zine"-element.
Edit:
As you found out yourself, since you use the 960 grid, the container_12 and container_16-elements have clearfix built-into them. Adding either of those class names to the wrapping elements does the same thing as I explained above.
You should use the grid_X classes (X is a number between 1 and 12), when you use 960.gs .
and you should add a .clear after every "row".
You should take a look at 960.gs's source and see how they use it. That's a really good overview.
Related
This is fairly simple, so I'm sure I'm just missing something obvious.
Say I have this example code:
<main>
<header>Header</header>
<section>
Content
</section>
<section>
Content
</section>
<section>
Content
</section>
</main>
And initial CSS of:
main{text-align:center;}
section{display:inline-block;width:33%;}
So I have three columns taking up more or less a third of the page each. Now, because of the way the code is written, there will be white space on the page. My preferred method of dealing with this is to set *{font-size:small}, and then add body>main{font-size:0;}.
Of course, thats fine on a simple page, where the font is the same. However, with different sized fonts and header tags here and there, this doesn't work well.
I think I just misunderstood what it is that the > selector does, but what I'm trying to look for is a selector that styles an element, without applying said style to children elements. In this case, I want to style my main element, but I don't want the style affecting the header or section elements.
What is the right way to do this?
And before anyone suggests it, no, I do not wish to use the other methods for removing white space (HTML comments, moving the final part of the closing tag onto the next line, etc.), as they look ugly and I prefer my code to look as presentable as my page.
First off: I'm not exactly sure if this works and not able to thoroughly test right now. This should have been a comment but I'm lacking the reputation to do so. sorry.
The problem is that the font size is one of the properties that is inheritet from it's parent and values like "small" don't set absolute sizes, but relative to the inherited size. so I would try to reset the size right after your main layer, using an absolute value instead of a relative one
body>main>*{font-size:18px;}
The important part is obviously not using a relative size, however, I have no idea how this holds up to user-specified default font-sizes. also, you would have to ensure that any text that has a non-medium font-size (so in your case any and all text) is at the very least a grandchild of main since the font-size for all direct children will be overwritten.
hope this will help you; bw
I need a wee bit of help with css formatting on my website. Please see the provided screenshot, which relates to http://www.zerogravpro.com/.
css problem http://zerogravpro.com/temp/zgp_formatting.jpg
Problem #1: My orange-background box in the Testimonial sections goes quite a bit lower than I want it. How do I force it to move up, directly beneath the word "Testimonials"?
Problem #2: See the nice "More" button with the green ball and arrow in it? When I tried to use the same exact style down in my Testimonials box, it shows up as just a boring link. I want it to look the same as the button. I'm guessing that the style only gets invoked when it has the right hierarchy, but how can I fix this without messing up any other styles?
I provided the link to my website, so you can view it in Firebug and see exactly what the styles are, etc. Thanks!!
The Box below Testimonials is so low because there are two <br>-Tags below this line:
<p class="dotline"></p>
Remove them and it will fit.
And for the more button, you should add the class more to this <p>-Tag (untested):
<div id="testimonial6" style="">
<p></p>
</div>
The styles describing the button-like more-element is applied to a paragraph with class="more". However, the paragraph also includes a lot more rules than just the button, so you should try to extract the CSS regarding the button in order to make it reusable.
When it comes to positioning of the lower link, if you want to place it near the header you really need to move it closer to the header in the DOM.
There's an empty p element with the class of 'more' right above the testimonial box. Remove it and the testimonial box will be pulled up. Give it an appropriate margin top, and it will look good.
As for the button, here's my attempt at it -> http://jsfiddle.net/joplomacedo/c3vqh/
I have an image and a rectangle (a paragraph with a coloured background) that should have their tops line up. They're both absolutely positioned and have the same style-top value, but the top of the rectangle is appearing about 15px below the top of the image, and I can't figure out why. Is there any reason why this might be happening?
HTML:
<img class="v1" id="image" src="/COMP2405A4/images/resized_adorkable!.jpg" style="position:absolute;top:313px;left: 61px;" alt = "Your Image">
<p class="mask" id="tmask" style="position:absolute;top:313px;left: 61px;width: 400px;height: 20px"> </p>
CSS:
p.mask {background: rgb(255,255,255);
opacity:0.5;
}
Your elements don't line up because the margins of your elements aren't the same.
Try explicitly setting margin: 0; on the p element.
Seems like you have the right idea. One of your other classes may be throwing you off. I made an example if you want to take a look.
http://jsfiddle.net/hwrQA/
It can't be other classes since the relevant styles are applied through a style tag, which overrides the default styles it may have.
However I can theorize that it may have to do with on of the elements, probably the image, having additional styles through the stylesheet creating extra offset.
Like padding on an image, the effect differs per browser but it may create the extra offset.
The best thing you can do to check why the offset it not correct is use the developer tools in chrome or firebug in firefox to select the relevant element and see which styles get applied and where they are coming from. Internet Explorer has debugging tools too but I wouldn't recommend them to start with.
If you want a better answer you're going to have to reproduce it in jsfiddle so we can see what is wrong. Try taking away stuff until nothing irrelevant to be bug remains, or if the bug dissapeared in this process you may have solved it yourself. Read the how to ask faq for more information.
Browsers I'm using for testing: IE, Chrome, FF;
Ideal layout example pdf: http://designobvio.us/dov2/Homepage1.pdf
Heres the link to the direct page http://designobvio.us/dov2/index.html
While Grid systems are excellent for laying out by width, I always stumble when using height constants.
Inside my code I have 2 major problems:
Ideally, I want to be encapsulate sections of my code by using
parent div that controls the height, margin-top. I've tried to
create this div colored a pale green and padded it for visuals.
this class is shown here:
siteBody #businessSection{ padding-bottom:200px; background:#0F9;}
I've also demonstrated idea in this imageURL: http://www.designobvio.us/dov2/Homepage1Encapulate.pdf
While trying to do this I've come up completely empty handed.
2.So next, I tried breaking down each section individually by using a class .businessInfo
#siteBody .businessInfo{height:200px; background:#ccc;}
Unfortunately this also didnt work and I have no idea why because all the grids line up perfectly.
I hope what I've stated above is understandable. I prefer solution one; however, if not possible 2 will work.
If I'm missing anything I'll response ASAP.
Thanks!
this problem stems from the use of float. For example problem : http://jsfiddle.net/GAvcL/
you can use clear attribute for solve problem.
Solution:
http://jsfiddle.net/qeDs3/
This is a common problem in html. Before closing the div that encapsulates the divs using float, use a div has clear attribute.
I'm specifying a teal background color for the body of a page:
<body style="background-color: #0197B1">
This overrides a style sheet, and sure enough the teal appears, but not all the way down the page (both in Firefox and Chrome)
I add the following at the bottom:
<br style="clear:both" />
some text
</body>
to attempt to resolve things and also debug what is occurring with the inline element at the bottom. It appears (Chrome developer tool) that the body does not go all the way down the page. Hmm ... why does this happen, what's the fix?
Page can be viewed at: http://www.momentumnow.co/testimonials
Thanks
Remove the height: 100%; property on the body (it's set in the CSS) and the background will fill the entire page. Also, as a friendly note, you shouldn't be using tables to design websites. It's very poor practice - what you want to do is easily achievable without tables.
Remove html {background-color:#ffffff;} and you should be done.
When you float an element you are removing it from the document's flow. The page loses a sense of where and how large the element is.
You page is a series of nested tables with floated elements inside. The only thing providing actual vertical structure is the tables themselves. Your background is ended where the tables run out.
To recode this page would be easy for someone who was familiar with Standards-based, semantic markup. I would suggest learning those methods. In the meantime, #Christian Varga's solution will get you off for the time being.
I check Firefox only,
line 4: html{background-color:#ffffff; height:100% }
Just remove body
or
line 4: html,body{background-color:#0197B1; height:100% }