Have a look at this screenshot for my problem:
This is the html code:
<div class="parent_process">
<div class="first_process"><img src="images/exprimer-besoin-telephonie.png"/><span style="width:18%">Vous remplissez le formulaire pour exprimer votre besoin (env 1 min)</span></div>
<div class="second_process"><img src="images/contacter-tous-les-vendeurs-autocommutateurs.png"/><span style="width:18%">Vous remplissez le formulaire pour exprimer votre besoin (env 1 min)</span></div>
<div class="third_process"><img src="images/recevoir-offre-standard-telephonique-pas-cher.png"/><span style="width:18%">Vous remplissez le formulaire pour exprimer votre besoin (env 1 min)</span></div>
</div>
This is css code:
.parent_process{ width:100%; white-space:nowrap; }
.parent_process div{ display:inline-block; width:33.3%;}
.first_process{ text-align:left; }
.second_process{ text-align:center; }
.third_process{ text-align:right; }
How can I have my 3 columns:
1)my text 1 | 2) my text 2 | 3) my text 3
Someone can help please?
Regards
Your three containers are the correct width, but the whitespace: nowrap style prevents the text from wrapping. So with overflow showing it just spills over.
If you remove whitespace: nowrap, your text will stay within the width of the container. However, you will notice a new problem. The columns do not fit on a single row:
http://jsfiddle.net/q1g0uxx4/2/
This is because the columns will have almost no space in between - not even space for a single character. With inline block, that causes them to wrap
You can remove all the whitespace between your divs, and they will fit:
http://jsfiddle.net/q1g0uxx4/1/
This isn't great for formatting though. Another way is to set the font-size of your container to 0.1px. Then it will fit even with formatted markup:
http://jsfiddle.net/q1g0uxx4/3/
I suggest using bootstrap as your css framework. They have a nice column system in place.
JSFiddle
The css is as simple as col-sm-4.
<div class='col-sm-4'>
<img src='http://ethanwiner.com/Smiley%20Land/Frenchie.gif' />some type of stuff that you can type some type of stuff that you can type</div>
<div class='col-sm-4'>
<img src='http://ethanwiner.com/Smiley%20Land/Frenchie.gif' />some type of stuff that you can type some type of stuff that you can type</div>
<div class='col-sm-4'>
<img src='http://ethanwiner.com/Smiley%20Land/Frenchie.gif' />some type of stuff that you can type some type of stuff that you can type</div>
Related
First of all. I´m kind of a rookie when it comes to coding webdesign. Last time I made a website was 20 years ago, and I can say that a lot has happened :-)
To the topic. I´m trying to create a couple of boxes in . I want them all to stay in the middle with a Little space between them.
They need to go down in a row like this:
[] []
[] []
My problem is that when i add my third and fourth they overlap the top boxes!
Link to code on fiddle:
http://jsfiddle.net/2cZtH/7/ enter code here
Here you go. http://jsfiddle.net/2cZtH/8/
You shouldn't really be using position:absolute for this ideally, that takes them out of the DOM and you have to position them all manually. You can give them a width of a % of the containing div and float them left for the same effect with much more ease. :)
div { width:25%; float:left; border-radius: 25px; margin-right:2.5%;
border: 2px solid #A9B8C2;
padding: 20px;
height: 200px;
background: #ECECEC; }
Edit: Of course you can use a set width if you know the width of the containing div.
See the fiddle
Your HTML code had many problems which made it to malfunction.I have changed your code a little. See below for the changed code. Please replace your HTML with this one.
The main problem with your CSS was that you was using position:absolute; which made it look like that. So i've changed that to position:relative.
You can read more about CSS positioning here..
HTML
<div class="container">
<div class="right">
<p id="rcorners"> <a href="#" class="fillthediv">
<img alt="Non-technical" style="float: left;margin-right:10px; width:128px; height:128px" src="images/Artiklar/Alger.jpg" />
<span class="fulldivhead"> Alger i våra kar</span>
<br /><br/>
<span class="fulldivp"> En artikel som beskriver ingående de vanligaste algerna i våra akvarier. Med många bra bilder tillsammans med Beskrivning/Orsak/Bekämpning gör denna artikel till
förmodligen den mest omfattande på webben.
<br/><br/>
</span>
</a>
</p>
</div>
<div class="right">
<p id="rcorners"> <a href="#" class="fillthediv">
<img alt="Non-technical" style="float: left;margin-right:10px; width:128px; height:128px" src="images/Artiklar/Alger.jpg" />
<span class="fulldivhead">De vanligaste växtbristerna</span>
<br /><br/>
<span class="fulldivp">
<br/><br/>
</span>
</a>
</p>
</div>
<div class="right">
<p id="rcorners"> <a href="#" class="fillthediv">
<img alt="Non-technical" style="float: left;margin-right:10px; width:128px; height:128px" src="images/Artiklar/Alger.jpg" />
<span class="fulldivhead">De vanligaste växtbristerna</span>
<br /><br/>
<span class="fulldivp">
<br/><br/>
</span>
</a>
</p>
</div>
</div>
I struggled to understand your code, is this something you are trying to create
http://jsfiddle.net/2cZtH/11/
I created a simple box that is repeated. Using display:inline-block; stacks them in order and causes a line break when it reaches the end of the viewport.
If you are just trying to create three columns using float:left is all you need.
http://jsfiddle.net/2cZtH/15/
Problem solved! By making the right box relative and edit margin-right plus margin-top. Plus link in clear after code. Thanks!
You could put them in a table:
<table>
<tr>
<td>
Top Left Content
</td>
<td>
Top Right Content
</td>
</tr>
<tr>
<td>
Bottom Left Content (Blank)
</td>
<td>
Bottom Right Content
</td>
</tr>
</table>
Put your divs in the table cells, and remove their absolute positioning property as this will prevent the table cells from sizing properly.
I'm making a website for a design class and I'm having a hard time placing things like I would want them to be.
I would like all box on the same row to be the same height, but I don't want a fixed height because the website will be responsive in the future. I would also like it if I could vertically center the content of the boxes.
Here is a screenshot of what it should look like:
And this is what it actually look like:
I tried many things but I can't think of a nice way to do that.
Here is a link to my current code: http://cgagnier.ca/gived/design/
Thank you very much
For equal heights columns you can also take a look here (use of pseudo elements):
http://nicolasgallagher.com/multiple-backgrounds-and-borders-with-css2/
Or another way is to explore the display:table rule, so you could define boxes as table-cells. This would then probably address also the vertical align problem (just using the vertical-align property on table-cell elements).
--
For the vertical aligning itself, I sometimes take advantage of the inline-block vertical-align property.
So, define every inner block as inline-block and with vertical-align:middle (so they align with each other). Then use a pseudo ghost element with height:100% to align the others with it.
I've also got a sass mixin for that:
//to be placed on a pseudo :after/before
#mixin vertical_pivot{
content:"";
width: 1px;
height: 100%;
display:inline-block;
vertical-align: middle;
}
this last technique is also explained here (see the ghost element part by Michał Czernow):
http://css-tricks.com/centering-in-the-unknown/
This will solve your issue:
#premium figure {min-height: 203px;}
It is mobile responsive.
Another solution will be to use a <table> layout, but in my opinion, stick to the solution above.
You just need to specify a max-height for those images like so
#premium figure img {
max-width: 45%;
display: inline-block;
max-height: 149px;
min-height: 149px;
}
Put an div arround those div's give it a class, like container, and give it a min-height and max-height.
div:
<div class='container'>
<div>...</div>
<div>...</div>
<div>...</div>
<div>...</div>
</div>
css:
.container{
min-height: 200px;
max-height: 200px;
}
Wrap your two figures in flex box div
<div style="
display: flex;
"><figure class="grille_6">
<img alt="DLC" src="img/p_dlc.png">
<figcaption>
<h1>Tous les DLC gratuits</h1>
<p>Obtenez gratuitement tous les DLC de Bugfield. Vous pourrez profiter de tous ces nouveaux bug une semaine en avance!</p>
</figcaption>
</figure>
<figure class="grille_6">
<img alt="Mallette" src="img/p_mallette.png">
<figcaption>
<h1>Participation au banquier™</h1>
<p>Lorsque vous achetez le Premium™, vous êtes automatiquement inscrit pour faire partie des spectateur du Banquier™</p>
</figcaption>
</figure>
</div>
<div style="
display: flex;
">
<figure class="grille_6">
<img alt="Couteau" src="img/p_couteau.png">
<figcaption>
<h1>Nouvelles armes exclusives</h1>
<p>Obtenez des nouvelles armes exclusives tel que le couteau bipod qui comprend une lampe tactique et une mire optique x10</p>
</figcaption>
</figure>
<figure class="grille_6">
<img alt="Priorité réduite" src="img/p_serveur.png">
<figcaption>
<h1>Priorité en file réduite</h1>
<p>Lorsque vous rejoindrez un serveur, vous serez placé dans une file spéciale à priorité réduite. Tous les autres joueurs passeront avant vous.</p>
</figcaption>
</figure>
</div>
You can also create a container and use the 2 columns as table cells. This is a really primitive demonstration, but I hope you've got the point. Fiddle
CSS:
#container {
display: table;
}
#content {
display: table-cell;
vertical-align: top;
background: #000;
color: #fff;
padding: 0 10px;
}
#sidebar {
display: table-cell;
vertical-align: top;
background: #cecece;
padding-right: 10px;
}
HTML
<div id="container">
<div id="sidebar">
<p>Sidebar<br>Sidebar<br>Sidebar<br>Sidebar<br>Sidebar<br></p>
</div>
<div id="content">
<p>Main content</p>
</div>
</div>
I have a little tricky responsive css problem.
I'm creating articles where there is a body of text on the left, and an image on the right. And the text wraps around the image. Then on the break point I need the body copy to be above the image.
When i use this code:
<section class="news-article-body">
<img src="img/news-article-image.jpg" alt="" title=""/>
<p>
Lorem Ipsum...
</p>
</section
Css:
.news-article-body img {
float: right;
}
Looks great. Image floats right and the text wraps around when needed.
But because the image tag is before the copy I cant get the image below the copy at the break point.
So basically I need the text to wrap with this html (Or another solution):
<section class="news-article-body">
<p>
Lorem Ipsum...
</p>
<img src="img/news-article-image.jpg" alt="" title=""/>
</section
Anyone know of a technique for this? I couldnt seem to figure it out.
Thanks
You could use display:flex and order :
at break point it would be from your piece of HTML :
.news-article-body {
display:flex;
flex-direction:column;
}
.news-article-body img {
order:2;
}
Javascript and float clearing can help too : DEMO or DEMO
Code example :
onload=function() {
document.getElementById('myImg').style.position='absolute';// take img out of the flow
var myoffsetHeight = document.getElementById('myP').offsetHeight;//return height of <p>
document.getElementById('myT').style.height=myoffsetHeight +'px'; //set height to floatting element
document.getElementById('myImg').style.position='static';//bring img back in the flow
}
from a structure like this :
<section >
<b id="myT"></b>
<img src="http://lorempixel.com/250/100/" id="myImg"/>
<p id="myP">Pellentesque ....</p>
</section>
in both example, do not forget set your breakpoint
Simply insert an <img> tag at the beginning of your article text and use align="right" to get the text to wrap around it.
I'm doing a website for a school work, but when I resize the screen and make it a little wider, the div elements are getting out of their place.
How can I prevent this?
most of the divs are:
.menu {
padding-top:120px;
position:absolute;
color:white;
font-size:28pt;
font-weight:Bolder;
}
My html:
<body id="BODY" class="BDNL" onResize="MOSTRA()">
<div id="resizing" class="">
<div id="intro" class="divintro">
<p id="p" class="comeco">Trabalho Interdisciplinar Orientado:</p>
<p id="texto" class="txtcomum">
Trabalho no qual um grupo deve elaborar um site que <br />
relacione todas as matérias técnicas estudadas.
</p>
</div>
<form>
<div id="menu" class="menu">
<label>RECO</label>
|
<label>LOCO</label>
|
<label> LP1</label>
|
<label> LP2</label>
|
<label> INFO</label>
</div>
</form>
</div>
</body>
You might want to look into the min-width and width properties of CSS.
Okay. Your HTML looks quite messy.
First of all, please start indending your code for the sake of your own eyes.
<html>
<head>
<title>Page title</title>
</head>
<body class="BDNL" onResize="MOSTRA()">
<div id="resizing">
<div class="menu">
RECO|
LOCO|
[--]
</div>
<div id="intro">
<p>
<h1>Trabalho Interdisciplinar Orientado</h1>
[..]
</p>
</div>
</div>
</body>
</html>
This is the minimal HTML-source you need to achieve the structure you desire.
Why exactly are you using position:absolute; on the .menu, I guess you want it to be positioned on top of the actual content?
I moved the .menu above the #intro container.
Use the following CSS to achieve the result you may want:
.menu {
margin: 0 0 30px 0; /* bottom margin 30px */
}
.menu a {
margin: 0 20px; /* left, right margin 20px; top, bottom 0 */
}
Also
please decide wether you want to use classes or IDs on your elements, in most cases you won't need both,
get rid of redundant classes and IDs (<p class="p"> or <p id="p"> do not make sense),
use the propper html elements for your content. Use <h1> - .. tags for headlines instead of differently styled paragraphs.
Make yourself familiar with CSS Margins and get rid of multiple .
As mentioned in your other question, you might want to give your elements (for example .menu) a fixed (min-)width which prevents the element from getting too narrow:
.menu {
min-width: 300px;
}
I have an issue with the HTML <br /> tag.
I have 2 images above each other.
With no <br /> between the two, the bottom border of the top image touches the top border of the bottom image which seems to be what it is supposed to be.
Then if I put 1 <br />, there should be some space between the 2 images. If I put 2 <br />, there should be even more space.
Here is the problem
Firefox version 3.5 seems to ignore the first <br />. If I put 2 then it puts some space between the 2 images.
IE7 puts some space between the 2 images even if I don't put any <br />
Things work fine in Chrome or Safari, i.e. there is no space with no <br />, some space with 1 <br />, more space with 2, etc...
I have not tested in IE8.
Is there a way to get around the fact that browsers don't seem to interpret the <br /> tag the same way?
Thanks for your insight!
Try using css to position the images rather than relying on the br tag.
img { display: block; margin: 0 0 20px 0; }
For example.
First of all you should make sure that you have a valid doctype on the page, so that it renders in standards compliant mode. That will minimise the differences. W3C: Recommended list of DTDs
The <br /> tag is not HTML, it's XHTML. If you are using HTML you should use a <br> tag instead.
If you don't have any break between the images, they would be displayed on the same line. If there isn't room for that, the browser will break the line and place one image on the next line. If you add a break between images that has already been broken into two lines, that makes no difference.
However, in some modes some browsers make a difference between images that are by themselves and images that are part of a text. Adding a break between the images means that they are part of a text, and the browser will display the image placed on the base line of a text line. This means that there is some space below the image that is the distance from the base line of the text line to the bottom of the text line, the space used for hanging characters like g and j. Depending in the size of the images and the line height, there may also be some space above the image.
To ensure that the images are not displayed as part of a text you should turn them into block elements. You can use the style display:block; for this. You can also use float:left; or float:right; to make an image float, that will automatically make it a block element.
The size of the br element depends on the font size/line height. Have you considered just setting display block on the image elements and setting a bottom margin, and maybe adding a 'last' class on the last one so it doesn't have a bottom margin?
<!doctype html>
<style>
body { background:gray; }
div#gallery .row img { display:block; margin:0 0 1em; }
div#gallery .last img { margin-bottom:0; }
div#gallery .row .thumb { float:left; width:5em; }
div#gallery .row { clear:both; width:50em; overflow:hidden; }
</style>
<div id="gallery">
<div class="row">
<div class="thumb"><img src=http://col.stb.s-msn.com/i/B4/BA27E3F44CD76DFB45ECCF070C722.jpg src=http://col.stb.s-msn.com/i/B4/BA27E3F44CD76DFB45ECCF070C722.jpg></div>
<div class="thumb"><img src=http://col.stb.s-msn.com/i/B4/BA27E3F44CD76DFB45ECCF070C722.jpg></div>
<div class="thumb"><img src=http://col.stb.s-msn.com/i/B4/BA27E3F44CD76DFB45ECCF070C722.jpg></div>
<div class="thumb"><img src=http://col.stb.s-msn.com/i/B4/BA27E3F44CD76DFB45ECCF070C722.jpg></div>
</div>
<div class="row last">
<div class="thumb"><img src=http://col.stb.s-msn.com/i/B4/BA27E3F44CD76DFB45ECCF070C722.jpg></div>
<div class="thumb"><img src=http://col.stb.s-msn.com/i/B4/BA27E3F44CD76DFB45ECCF070C722.jpg></div>
<div class="thumb"><img src=http://col.stb.s-msn.com/i/B4/BA27E3F44CD76DFB45ECCF070C722.jpg></div>
<div class="thumb"><img src=http://col.stb.s-msn.com/i/B4/BA27E3F44CD76DFB45ECCF070C722.jpg></div>
</div>
</div>
Though in this example it'd be easier to set a bottom margin on the row itself.
if you want to use the tag you can do it so :
<br style="line-height:?px; height:?px" />
where ?px = how many px it`s needed to show the result you need
OR
you could use:
<br clear="all" />
it should work...
if you want to use CSS you could do it so :
<style>
img.newline{
display:table-row;
}
</style>
<img src="1.jpg" class="newline"/>
<img src="2.jpg" class="newline"/>
it should work.. these are quick ways to do it.. you can use css and make something great.. but what i wrote here are "quickies" and most simple/fastest ways i thought of.
The br element is a presentation element that offers no descriptive value. Most browsers tend to apply default presentation to different elements that can differ slight from browser to browser. So, I would strongly recommend not using the br element and instead using a span tag and CSS to ensure your presentation is uniform across various browsers.
Are you set up like this?
<img src="1.jpg" />
<img src="2.jpg" />
The correct behavior is actually to not line break between the images, they should appear on the same line. The first BR tag added should bring the second image to a new line, then the second BR should create a gap.
It might fix it if you specifically tell your images to line-break themselves, so they appear on separate lines even without a BR.
I would add one thing to DanTdr's response. If you don't add a small font size for the BR tag then you run into problems in IE because of it's hasLayout behavior. The BR would be a minimum of 1em.
<br style="line-height: ?px; height: ?px; font-size: 1px;" />
After being frustrated for some time with not getting BR tags to render the same in Firefox and IE this font-size: 1px; style finally made my layout appear the same in both browsers.