The website I am making is here: diyhelp.es
If you re-size the browser you will see the white background behind the content actually get smaller (even though the div gets larger) I've looked in the CSS and cannot see a problem. Since I don't know what is causing it I cannot paste any code (unless you want me to paste the full CSS?).
It's only a plain white background - no image.
In your css.css find line:438, that looks like this:
section.content, aside.sidebar, .footer-col { float: none; width: 100%; }
remove the float:none; and it should solve your problem. Why? I'm not sure totally, but float:none; is known to mess up other floating divs. It is better not to use it. I can't even think of a reason why you might need it. In you markup, you don't need it there, because when floating div is set to width:100% there is no room for anything to float beside it anyway.
Related
I've made my own static website from scratch using html5 and css(3) only.But I have got 2 issues.
The first one is the white space between the top's menu and header's image bottom.I've tried everything.
Maybe the only solution for that is float:left; but then the image goes into the navigation tag or negative value on margin's property but I've heard that this technique is bad.
The second issue I'll display via image http://www.filedropper.com/discoversite that's my simple WebSite. I know my css is awful but I'm still a beginner. The second issue is here. http://postimg.org/image/5adp6379d/ . As you can see the text is going out of the box. (I am using % in css for more responsive). I will be glad if anyone can help me.
I can only have a guess for your first issue as I don't know the exact code for your website (create jsfiddle :D ). Try to apply vertical-align: bottom; or display: block; to your header image. Why? Because images are placed like text and some letters like g, j, q and p are going underneath the bottom level. Your browser will leave a tiny space for these letters. Also setting a min-width is a good solution like Kirk Logan said.
And for your second problem there are multiple solutions (depending on what you want):
You can handle your content with overflow: hidden; or overflow: scroll as Kirk Logan suggested. But this wouldn't make any sense in the case you have shown us in the picture.
Or (is a little more complex) you could remove the white borders on the left and right side (just when the screen is too small) in order to gain more space for the text. This can be done by:
#media only screen and (max-width: 768px) {
#BigBorder1 { border-width: 0px; }
#BigBorder2 { border-width: 0px; }
}
Everthing inside the outer brackets will only be applied when the screen's width is smaller than 768px. But to be honest this is usually done the other way round: When the screen is bigger than 768px then something happens. This simplification is only in order to make it easier for you.
I have tried the following approaches but they do not seem to work for me (I'm sure I am doing something wrong - I need help in figuring out what it is). The image is in the HTML header section (not body).
I have bootstrap in the HEAD section (before the image and it gets picked up from the browser cache so hopefully it gets used for the image in the header)
I have tried adding the following to the CSS for the image (and when it did not work, I tried adding a div around the image and assigned the class to the div):
display:inline;
text-align:center;
margin:auto;
I also tried the following in the CSS when option 2 did not work:
display:inline;
margin:auto;
horizontal-align:center;
I tried display:block in place of display:inline as well. Any thoughts on fixing this (specially without relying on bootstrap would be quite welcome). Thanks in advance!
General css properties for centering elements:
{
display:block;
margin: 0 auto;
}
First, you can't set a margin on an element that is set to display:inline.
Here is a great guide that you should read:
http://www.tipue.com/blog/center-a-div/
Place the image in a div, and then put text-align:center on the div. That's it.
http://cdpn.io/aDBhq
This is some html and css, you can see what it does:_ (The first box is really the one that matters)
http://jsfiddle.net/rcGsH/2/
The problem is to make this work properly with the image there, I have to use some tricks to get it to work properly that don't seem very good... like
floating the img left or right so it's not really taking up space.. (is there another way around this? or is it fine how i'm doing it?)
.ad img {
height: 175px; width: 175px;
float: left;
}
And making another wrapper div around the text inside the ad_info div and setting it to bottom: 175px so that the text stays in the transparent part... is there another way to this as well?
If anyone has proper fixes to these problems or these are fine please tell...
OR I have another idea where i could put the image as a background image with JQuery, (since the image will come from php), i have a good idea of how that would work but could anyone tell me which solution is better?
Thanks!
There is a lot of ways to do this, you are doing right (maybe some extra divs), but I thinks this is what you are looking for:
Boxes, images and captions
Like an extra, they use a little bit jquery, to animate the boxes ;)
Have a look at this fiddle: http://jsfiddle.net/h4VS7/
How do I make the yellow element align (horz) with the grey background no matter how the window is resized? I refuse to believe it can't be done with css. Yes, js hacks and Scroll Follow plugin works but lags.
Please, anyone?
Edit:
Found a solution. If the container margins are expressed as percentages the content part can be expressed as the remainder percentage. See here: http://jsfiddle.net/h4VS7/1/
Though not sure why it doesn't align perfectly. It should I think. Could be jsfiddle margin/padding related.
It's not particularly difficult if you don't mind adding an extra element to wrap .top:
http://jsfiddle.net/Ud3ZQ/
And also, a properly aligning (well, almost) version of your solution:
http://jsfiddle.net/h4VS7/3/
The problem was that jsFiddle loads http://fiddle.jshell.net/css/result-light.css:
body {background: white; padding: 10px; }
Anything is more specific than * (including body), so the padding was being applied, regardless of * {padding:0; margin:0}
I have a site I made really fast that uses floats to display different sections of content. The floated content and the content that has an additional margin both appear fine in FF/IE, but on safari one of the divs is completely hidden. I've tried switching to padding and position:relative, but nothing has worked for me. If I take out the code to display it to the right it shows up again but under the floated content.
The main section of css that seems to be causing the problem is:
#settings{
float:left;
}
#right_content{
margin-top:20px;
margin-left:440px;
width:400px;
}
This gives me the same result whether I specify a size to the #settings div or not. Any ideas would be appreciated.
The site is available at: http://frickinsweet.com/tools/Theme.mvc.aspx to see the source code.
I believe the error lies in the mark up that the color picker is generating. I saved the page and removed that code for the color picker and it renders fine in IE/FF/SF.
Have you tried floating the #right_content div to the right?
#right_content{
float: right;
margin-top: 20px;
width: 400px;
}
Sorry I should have mentioned that as well. I tried floating that content right and additionally tried floating it left and setting the position with the thinking that both divs would start out at left:0 where setting the margin of the right would move it over.
Thanks
A few things you should fix beforehand:
Your <style> tag is in <body>, when it belongs in <head>
You have a typo "realtive" in one of your inline styles:
<a href="http://feeds.feedburner.com/ryanlanciaux" style="position:realtive; top:-6px;">
Try to get your page to validate; this should make debugging the actual problems far easier.