I searched the forum for a similar CSS issue but my keywords didn't really help. I apologize if this has been asked elsewhere but I couldn't find it.
So, to be brief, I'm new to website design and am trying to build a site for a friend. I have an idea laid out and am putting it together bit by bit, but I ran into a strange issue. It's difficult to explain so I'll post two links and explain the difference between the two:
Link1 and
Link2
The problem I'm having should be clear if you look at the two sites. Basically, I have a "content" section that seems to have some invisible tag invading it for the first two lines. The only difference between the two references above is that on the first, I put a < p > tag in the "content" section, and on the second, I put two line breaks and then the < p > tag. The fact that the text wraps when there are two line breaks but not otherwise suggests to me that there is some DOM element invading the "content" div's space, but I have used every browsers' "inspect" tool and cannot find the culprit. If anybody can assist me, I'd greatly appreciate it. Thank you!
I looked at your code and it needs some rethinking and restructuring. Your use of css positions is not appropriate. Please dig deep into positioning and floats to understand better on how to structure your containers.
To fix your issue, you can add clear: both on #content
#content{clear:both;}
In first link (without line breaks, remove top:25px add overfolw:auto)
#content {
background: white;
position: relative;
width: 100%;
height: 550px;
margin: auto;
opacity: 0;
overflow: auto;
}
Related
I'm sure my question is quite a newbie one, anyway I can't figure out what I'm doing wrong. Basically, I created a <div> that I use as header, and inside of it another <div> that contains an image (logo) and a title (using <h1>).
The problem is that I get an unwanted extra space above the body
as you can see in this picture.
If I get rid of the <h1> title then everything is fine. I think the problem is due the float: left; property that I have assigned to the image, because if I assign no float property then the space disappears, but as you can see if I remove the float: left; the image and the title are not "aligned" anymore. So, the question is, how can I make the image to stay on the left and the title on the right of the image, without using float properties?
Any help will be appreciated, thanks!
Edit: Thanks everybody for the answers, I'm studying HTML and CSS at school and things like this are rarely mentioned by my teachers. Thanks again
A h1 element has margin by default. Simply remove it by adding:
margin: 0;
To the styles for your h1 element.
you can use this:
<h1 style="margin-top:0px; padding-top:0px">some text</h1>
At start of your work you should clear the style for margin (browser apply some of them).
So just in start of css file write:
h1 {
margin: 0;
}
A lot of devs just start a css file like :
* {
margin: 0;
padding: 0;
}
for clear it :)
Also you should read something about css reset and css normalize :)
This is because every browser has a default stylesheet, which you can find in Browsers' default CSS stylesheets. As you can see, the default margins are not zero. This can be solved by explicitly adding margin: 0px to your CSS.
I'm making a friends list script for an online browser game I play. I have 4 divs I need within the wrapper: 1) List of friends, 2) Add Friend, 3) Friend requests, 4) Chat. I figured out how to get the first two, but I need advice adding the rest. Here's what I have so far and what I want to add:
What would be the best way to add the two divs on the right? Should I make some sort of table of the 4 divs?
My css for the two divs both look something like this:
position: relative;
width: 40%;
height: 70%;
top: 5%;
left: 2%;
border: 1px solid blue;
If anyone can give me insight on a good way to accomplish this setup I'd greatly appreciate it. Here's a fiddle of the basic outline I have so far: https://jsfiddle.net/kfupd6hb/1/
You can use float:left; attribute of css.
I've updated ur fiddle..
Somehow i'm unable to create a link here that's why providing link in comment.
I suggest using display:inline-block; to get the <div>'s side by side, you can make a really perfect grid with that property.
When I use in-page links or "anchors" to reach a part of the page, the scrollbar doesn't allow me access to the content above -- even though it is there in the HMTL.
My site is developed in WordPress but I think the problem is more my CSS.
See the naughty
http://adanewmedia.org/submissions/#review
versus the nice http://adanewmedia.org/submissions/
Any ideas are appreciated!
Line 92 of style.css, remove this:
#main {
overflow: hidden;
}
Seems like a weird bug, or maybe you have a height set in some parent element to the #main div. Removing that style should fix it though.
Further inspection I found this (style.css line 96):
#main-content, #secondary {
margin-bottom: -32767px;
padding-bottom: 32767px;
}
This is where your issues begin. Removing this nonsense fixes your original issue, but changes up the style of your site quite a bit. If you want to remove the black sidebar/footer, do that instead of pushing the containers all over the place.
When I tried playing with your code, it seemed to be this line in your style sheet that caused it - http://adanewmedia.org/wp-content/themes/twentyfourteen-child-ada/style.css?ver=3.9.1
#main-content, #secondary {
margin-bottom: -32767px;
padding-bottom: 32767px;
}
Not sure what you are trying to do with that.
Also: firebug is rendering the page very oddly - I'd try validating your code as if Firebug is struggling to render the page correctly, then browsers are also likely to throw unexpected layout issues.
I'm having a problem with a site created in Drupal 6 but not compatable in IE. Anyone familiar with Drupal would you mind just quickly taking a look at the website and let me know if anything jumps out at you?
http://freespiriteurodesign.com.b1.bloomsite.net/
It's probably a css: "hover" , "float" or "display" issue but what is really confusing me is that it looks like the images were repeated once next to each other - Let me explain, (there are six images total with three overlaying the first three to create the hover effect) In IE it looks like there are 12 total (that the image and it's overlay are repeated) and that this is why it is pushing the floated images underneath eachother. It shows up correctly in firefox, if it helps to look at what is is suppose to look like there. I've been up all night looking for a similar problem on any forums but haven't come across any.
I just thought that perhaps someone very familiar with Drupal might think it looks like something they've dealt with before and give me a starting point...
ps. (oh yeah, and I want to figure out what the actual issue is, not just use a tag that puts the site in compatability mode) - Thank you for all thoughts!
Ok, after looking at your source I see that you are nesting divs inside your anchor tags and I would say that is your problem as it is not valid HTML:
<a href="/design">
<div class="desgn_bx">...</div>
</a>
Instead, nest the div elements the other way around so your HTML is as follows:
<div class="desgn_bx">
<!-- rest of your content -->
</div>
Then add the following CSS:
.desgn_bx {
position: relative;
}
.desgn_bx a {
*background-color: inherit; /* add these for IE7 as it does */
*filter: alpha(opacity=10); /* not like boxes with no content */
bottom: 0;
left: 0;
position: absolute;
right: 0;
top: 0;
z-index: 10;
}
This will force the anchor tag to take the full height and width of the .desgn_bx element so it will still be clickable.
I've read about quite a few people having a problem with this and I've tried all the solutions I can find - hopefully someone can't point out where I'm making a mistake.
I'm working on this site, and as far as I can tell, I'm in standards mode. The doctype is the first thing in the file, and it's valid. I've tried using a wrapper div or body tag with text-align: center and the container div using text-align: left.
I can't seem to find anything that works. Any ideas would be greatly appreciated.
Your problem looks like it's in the ie7.css file. It has this rule:
* {
display:inline;
zoom:1;
}
Inline elements don't have margins. You'll need to drop this rule, or add display:block; to .container_12 somewhere.