I've got problem with paragraph on my website: naprawiamy.za.pl. As u can see there is a big white space in the text. What's that and how it got there? Could somebody tell me?
This happen because the above div contains img that have float:left. So there is need to clear the float. Add overflow:hidden for the div with img tags and will fix the text below.
Your code is written as:
<div id="main">
<div>
<img src="lol.png" id="logo" alt="logo serwisu">
//more images
</div>
<div id="story" >
Your Text
</div>
</div>
Set the CSS Property float:left for
1. <div style="float:left">
2. <div id="story" style="float:left">
Related
I feel really silly having to ask this, but I haven't been able to find much info and I am having a strange issue. Basically, I have the following html:
<div class='one'>
<div class='two'>
<img src="someImage" class="img-responsive teamPhoto"/>
<p>Some text</p>
<p>Some text
</div>
</div>
Simple enough. The issue that I am having is that when I look at the height of div one and two, the height is only equal to the nested image in div two.
It does not include the 'P' elements at all, and when I inspect in the browser I can see that both div's only extend as far as the bottom of the image.
What am I missing here that my paragraph elements are being excluded from the div height?
I don't see your css but I am pretty sure that there's something wrong with styles of 'one' and 'two' div. If you inspect the two div element in Chrome dev tool, try to disable all styles for the two div element and it should work.
<div class='one'>
<div class="two" style="position: absolute;background-color: #ccc;">
<div>
<img src="https://fyf.tac-cdn.net/images/products/large/TEV12-4.jpg" class="img-responsive teamPhoto">
<p>Some text</p>
<p>Some text</p>
</div>
</div>
</div>
I'd put the image and p tag inside another div to solve your issue. The div one still has height = 0 though
Depending on where I put the </a> tag, the boxes look different. Here is what it looks like at the moment.
JSFiddle
<a href="#"> <div class="box">
<header><h2>Responsive C3</h2></header>
<div id="chartA">
</div>
</div></a>
How can I keep the first box as a clickable object while the second box is aligned side by side? With out the <a></a> tags then they align just fine.
the class box allow your blocks to float:left and therefore be side-by-side.
If you apply class="box" to the a tag instead of the div tag it will work as you expect.
<a href="#" class="box">
<div>
<header>
<h2>Responsive C3</h2>
</header>
<div id="chartA">
</div>
</div>
</a>
Here is a good article to understand more about float : https://css-tricks.com/all-about-floats/ and another about display: https://css-tricks.com/almanac/properties/d/display/
I have this part on my index.html page
<!-- Top of the Page -->
<div id="home" class="container header">
<div class="row">
<div class="image-header margin-0">
<div class="overlay"></div>
<div class="headertext">
<h1>EXAMPLE</h1>
</div>
</div>
</div>
</div>
I am trying to target the word 'EXAMPLE' in my main.css, but I am having troubles with it. Whatever I try, it seems to target the parent divs or not target it at all.
I have tried targeting:
.headertext .h1
.headertext h1
p h1
I basically tried every combination, but I can't achieve the effect I desire.
My goal is to have an image, then a black overlay with opacity on top of the image and then some text in the center of the page.
Thanks everyone!
edit: removed p tags around h1
edit2: I actually figured it out. There was margin-top added automatically to the h1. I am guessing it's a default in bootstrap? I set margin-top to 0 and it's working fine now. Thanks!
You can't use <h1> inside of <p> as this is an invalid HTML. Although you can use an anchor or a span with a bigger font size.
Please try something like below.
.headertext h1 {
color: green;
}
<div id="home" class="container header">
<div class="row">
<div class="image-header margin-0">
<div class="overlay"></div>
<div class="headertext">
<h1>EXAMPLE</h1>
</div>
</div>
</div>
</div>
I actually figured it out. There was margin-top added automatically to the h1. I am guessing it's a default in bootstrap? I set margin-top to 0 and it's working fine now. Thanks!
I want to achieve the following effect using HTML & CSS:
Printscreen
However, I'm not sure if I'm doing it correctly.
The current state is the following:
<div class="post"><!-- Posts are just divs with a white background -->
<div class="post-header">
<div class="left">Som Text</div>
<div class="center">
<img src="pseudo" class="center" />
</div>
<div class="right">Som Text</div>
</div>
<p class="title">Som Text</p>
</div>
Then, I'm simply doing a margin-top:-66px; on div.post div.post-header.
This is probably not what one should do.
Can you give me an idea on how to approach this?
You Can Try Position-relative thing also, for this make post class position:relative and other class as position:absolute and set them where u want
a print screen or just a margin-top property won't do any good, since the screenshot is not displayed here too.
can u give me the link to see the live preview of the page
I did something similar on my site. Feel free to visit http://robertfauver.com/
In CSS, how do I achieve the following layout?
xxxxxxxxxxxxxR1xxxxxxxxxxxxx
xxxxxxxxxxxxxR1xxxxxxxxxxxxx
xxxxxxxxxxxxxR1xxxxxxxxxxxxx
xR2.1x xxxxxxxxxR2.1xxxxxx
xR2.1x xxxxxxxxxR2.2xxxxxx
xR2.1x xxxxxxxxxR2.2xxxxxx
xxxxxxxxxxxxxR3xxxxxxxxxxxxx
xxxxxxxxxxxxxR3xxxxxxxxxxxxx
xxxxxxxxxxxxxR3xxxxxxxxxxxxx
R2.1 is an image that I want to go to the left, and R2.2 is a div that I want to go to the right.
If R2.2 was a paragraph, it would be easy - I could just use float:left on R2.1 - but the fact that it is a div seems to mess things up.
I've tried using <img style="float:left;"> and <div style="float:right">, together and separately, but they don't seem to combine well.
What am I doing wrong?
There is no need to use float:right on the right side, just use float:left and margin:
<div>r1</div>
<img style="float:left; width:50px; height:50px;" title="r2.1" />
<div style="margin-left:50px;">r2.2</div>
<div style="clear:both;">r3</div>
Is there any reason you can't put the image inside the second div? That would sort it out:
<div id="r1" style="height:100px; background-color:#eff;">r1r1r1r1r1r1r1r1r1r1</div>
<div id="r2" style="height:100px; background-color:#efe;">r2r2r2r2r2r2r2r2r2r2
<div id="image" style="width:160px;height:100px;background-color:#ff8;float:left">
</div>
</div>
<div id="r3" style="height:100px; background-color:#fee;">r3r3r3r3r3r3r3r3r3r3</div>
http://jsfiddle.net/WP6bc/1/
Try:
<div style="margin-left: [width of picture]">
The floats should work as expected. Make sure you add a clear:both to the R3 div, so it knows it should start beneath the floating divs, and that the left/right divs have the correct widths so they aren't pushed to a new line. Example:
<div>r1</div>
<img style="float:left;" alt="r2.1" />
<div style="float:right;">r2.2</div>
<div style="clear:both;">r3</div>
http://jsfiddle.net/wHm8n/