This is what I am trying to describe as my problem, you can see the white content box just kind of stops:
Link to image as I cant put images on here yet:
http://imageshack.us/photo/my-images/534/43094999.png/
The image loaded for that background apparently isn't long enough, and I am not sure how to repeat it down so it all flows.
Here is a peak at my css if that helps in solving the problem:
http://pastebin.com/RwcAPjS5
You need to clear floats after the list of boxes. You could do this with an extra element, or by adding the clear CSS property to the next sibling element (note that this stops some margins working).
.clearfix {
clear:both
}
Then in your HTML (the ul is just a guess as I haven't seen your HTML):
<ul class="float-boxes">
<li>...</li>
</ul>
<div class="clearfix"></div>
There's a good article on floats here, which touches on why this happens.
Related
the button are wrapped in a inline-block, but I want to make it align to right. when I do float: right, part of it disappeared
html:
<div class="card answer" id="answer4" href="#answer4">
<div class="btn-text-inline">
React Generated HTML
</div>
</div>
css:
.btn-text-inline {display: inline-block;}

before adding float:right
after float:right
I would advice to add a custom background-color css property to every single element on your website to actually be able to see how much space does each of the elements take. Maybe the buttons are hidden behind another element. In this case, probably behind 'add comment' element
If you know how to use developer tools in your browser, you can achieve the same by opening developer tools and hovering over the elements of interest.
I'm trying to understand this webpage:
http://www.canadianliving.com/food/slow_cooker_beef_stew.php
It is divided into several sections where each section has a border around it. For example, to the right of the title "Slow-Cooker Beef Stew" is an image "tested till perfect". Immediately to the right of this is a border, which separates it from an advertisement. This border extends down and separates the section from the "Related Content" section below.
But what is making the border? I am using Chrome's Inspect Element, Computed Style, but none of the tags seem to have a border-style. What else can create a border?
(I'm not looking for the best way to make a border; I need to understand how other pages do it.)
EDIT:
Based on people's answers, I tried the html below, which is not working. I don't get how an image in a parent div is repeated in each child div in such a way that it fits exactly along the border.
<div style = "float:left;background-image:url('http://www.canadianliving.com/media/images/background_02.png?201206051535');background-clip:border-box;background-origin:padding-box;background-repeat:repeat-y;" >
<div style = "float:left;width:300px;background-clip:border-box;background-origin:padding-box;padding-left:8px">hello</div>
<div style = "float:left;width:300px;background-clip:border-box;background-origin:padding-box;padding-left:8px">there</div>
</div>
http://www.canadianliving.com/media/images/background_02.png?201206051535
Its an image, not a border, remove the image to get rid of the 'border'.
I deduced this by selecting the container element and reviewing the css background property,
for future reference.
Here an example:
<style>
div#test {
height:800px;
width:800px;
background:url(http://www.canadianliving.com/media/images/background_02.png?201206051535) top right repeat-y #676767;
}
</style>
<div id="test">TestDiv<div>
Keep in mind, this is a rough sketch of what it should look like. I'm not planning on learning you this without some effort. Try w3schools for an html / css tutorial.
I'm betting we all did this kind of research and a lot of trying before trying to submit to these kind of forums.
Happy coding, good luck!
D.
The background is set on the div#right_col where the ads are. They have a padding-left of 8px (width of the shadow background image) and a background set on content-container with url('/media/images/background_02.png') 0 630px repeat-y.
basically, it is a background url that is used as a shadow border. Please look at the CSS of #content_container in firebug/chrome inspect element.
It is not a border but used as a seperator.
I'm sure this is something simple but I am just not seeing it.
My wrapper DIV is floating left and the A tags within are displaying correctly but mousing over them you'll see that they are not the proper height/width.
I can't seem to get them in line, could someone take a quick look and tell me what I am missing?
Page is here, it's the social media icons
Any help is greatly appreciated, again I am sure it's something simple.
--Edit--
I am on a Mac, tested with firefox and safari so far, they don't hover correctly, only the very bottom portion of them actually function as a button.
In firebug, if I remove the wrappers float attribute, the links hover as they should. So I know it has something to do with the float.
On Chrome the icons are in a line but, as you said, only the bottom portion of them is active. The problem is that your #branding element extends down below the bottom of #main, partially obscuring #subWrapper, #sub, #left, and part of #right (though not enough to cause a problem there).
You could put overflow: hidden on #main, but then the graphic in #branding would get cut off at the bottom. (The graphics look very nice, BTW.) I think if you just add a positive z-index to either #sub or #subWrapper, such as z-index: 1, that should do the trick.
When you hover over the top nav links (contact/donate/media) in IE7, the footer div comes up to the level of the sidebar.
I've tried:
- Disabling all scripts
- Putting clear divs in footer
- Setting height/min-height for the sidebar.
- Removing the twitter/facebook widgets
- Removing all the CSS stylings for the top navigation bar
Same problem. Any ideas?
I have had a problem similar to this a few years ago. What caused it for me:
hovering over a link in a menu
menu item changes size ever-so-slightly by adding a 1px border, creating an underline, becoming italicized, etc..
new size of item caused the outside container to become a few pixels wider than the declared width
footer/other content floats up because there are a few extra pixels OR
something on the same height of the menu is kicked down a below the container-object and throws a wrench in the rest of the flow
Hope my experience helps!
edit
Yes, I did fix it.. It was a mess, but basically involved going through each :hover selector and making sure that absolutely nothing changed -- except the colors involved. I also remember that I needed to re-declare and width: nnpx; height: nnpx; in the :hover selector.
Man! Love programming for old browsers!
Solution was to move the "navigation" div inside the "header" div.
Don't know why, just kept taking out divs by process of elimination.
I'm currently redesigning a website and have run into an issue with some elements in the header. The header contains a logo, some text and a navigation bar. Between the bottom of the logo and the top of the navigation bar there is a relatively thick gap, shown in this screenshot:
I don't want the gap, I don't know where it's come from and I don't know how to get rid of it :(
I can reduce it down to a single pixel by setting the line-height property of the div containing the logo down to 0.0, but it seems hacky and still doesn't fix the issue.
The work-in-progress version can be viewed live here, if anyone with more HTML/CSS experience can identify any silly mistakes I've made.
add the following css class
.logo img
{
vertical-align:bottom;
}
The space comes from descenders which allow y and g characters to fully fit vertically.
display:block; or vertical-align:bottom; should equally work.
img { display: block; }
The gap is there because images are inline elements aligned at the text baseline by default. It's where descenders would go if you had text with descenders in the same line.
It looks like you're getting some spacing from both the <div class="logo">, and from the <a href="#"> which wrap your logo. You can fix this using the display:block; or vertical-align:bottom; as mentioned above.
Recommendation: If you're not currently using it, you might want to look at installing the Firebug plugin for Firefox. It's a great tool for inspecting your page. You can highlight specific areas, and Firebug will show you which HTML elements and CSS classes are responsible for the layout.
The <a> containing the element should have display:block; position:relative and the image should have position:absolute. Works here.