So this is actually more of a question why that is and not how I fix it. I could easily make a hack and just give the middle two strings classes that position them correctly, but I would like to know why that is and how I can properly fix it.
Heres an image to show what I mean. All 4 divs have the same code, just different images and text, still the middle two have the "XXXX players" on a different position.
Heres my html and css code:
.lp-popular {
height: 705px;
}
.lp-popular .title {
margin-top: 91px;
margin-left: 457px;
}
.lp-popular .game {
display: inline-block;
width: 240px;
height: 383px;
background-color: rgba(8, 9, 11, 0.5);
margin-top: 35px;
margin-left: 6px;
margin-right: 6px;
}
.lp-popular .game .heart {
float: left;
margin-top: 21px;
margin-left: 20px;
}
.lp-popular .game span {
float: left;
margin-left: 12px;
margin-top: 10px;
font-weight: 500;
font-size: 18px;
color: #ffffff;
}
.lp-popular .game p {
float: left;
margin-left: 15px;
font-family: Arial;
font-weight: normal;
font-size: 14px;
color: rgba(255, 255, 255, 0.5);
}
<div class="lp-popular">
<img class="title" src="img/lp_popular_header.png">
<div align="center">
<div class="game">
<img src="img/lp_popular_game_lol.png">
<img class="heart" src="img/lp_popular_heart_full.png">
<span>League of Legends</span>
<p>4000 Spieler</p>
</div>
<div class="game">
<img src="img/lp_popular_game_dota.png">
<img class="heart" src="img/lp_popular_heart_empty.png">
<span>DotA 2</span>
<p>4000 Spieler</p>
</div>
<div class="game">
<img src="img/lp_popular_game_csgo.png">
<img class="heart" src="img/lp_popular_heart_empty.png">
<span>CS:GO</span>
<p>4000 Spieler</p>
</div>
<div class="game">
<img src="img/lp_popular_game_hs.png">
<img class="heart" src="img/lp_popular_heart_empty.png">
<span>Hearthstone</span>
<p>4000 Spieler</p>
</div>
</div>
</div>
Thanks in advance!
Add the following line of CSS to clear the floats of the game title:
.lp-popular .game p {
clear: both;
}
why the middle images have different location for 'XXXX players': reason is pretty simple. note that first and last images have string length of 17 characters including space [League of Legends] and 10 characters [Heartstone] which fills up the the whole width available for that row. but in case of middle images, the string lenght is 6 [DOTA 2] and 5 [CS:GO] which is not enough to fill that top row. Hence the next text/string comes up to fill this gap and there-hence you get the 'XXXX players' on the same row instead of second row despite of having same css rules for them.
Fix: as #Ryan and #Akatosh have already given suggestion on how to fix this i.e.
.lp-popular .game p {
clear: both;
// clear: left;
}
Related
Here is my code:
<div class="contact">
<p class="size25">TOP 1% Realtors</p>
<p class="size16">32 years in real estate</p>
<p class="size16">Closed one home every 10 days in 2011 - 2012</p>
<p class="size16">Specializing in the 24/680 Corridor</p>
<p class="size16">example#aol.com</p>
<p class="size25 phone">(510) 555.5555</p>
</div>
CSS:
.contact p{
float:right;
}
.contact{
color: #fff;
display: block;
width: 421px;
height: 114px;
position: absolute;
margin-top: -96px;
margin-left: 519px;
font-family: 'Marcellus', serif;
font-weight:300;
line-height: 12px;
}
.contact a:link {
text-decoration:none;
color: #AC872F;
}
.phone{color: #AC872F}
.size25{font-size:25px}
.size16{font-size:16px}
.size14{font-size:14px}
.size11{font-size:11px}
.size10{font-size:10px}
Image: http://imgur.com/LntF419
I want the text on the right to be aligned right and each on it's own line. Right now as you can see the email is not. This is also my first time using twitter bootstrap so if there is something that can help me please let me know.
Add clear: both to the .contact p. The clear attribute removes other elements in line with a floating element.
Demo: http://jsfiddle.net/q4YdC/ (I've removed the div margin for visibility reasons)
I have recently tried to code a box, contains an image on the left side and next to it an header & paragraph under right like this:
http://gyazo.com/c5165fa45c32f69499768ba95d815328
This is what i have done:
<div class="span4">
<div class="box">
<img src="img/share.png" class="image_margin"/>
<span class="box_title">SHARE</span>
<span id="texting">Upload files straight from you hard disc. Up to 600MB per file upload! the more you earn the more file storage you get.</span>
</div>
</div>
CSS:
.box {
background-image: url("../img/box.png");
width: 305px;
height: 117px;
}
#texting {
font-size: 14px;
}
.image_margin{
margin-top: 25px;
margin-left: 25px;
}
.box_title{
font-size: 24px;
color: #8d8d8d;
margin-left: 15px;
margin-top: 20px;
position: absolute;
}
This is the result:
http://gyazo.com/f600c42f86b51e52de436631fc96656d
Why the text gets out of the box yet its inside the class of the box ?
What have I done wrong? how do I align the title + paragraph like in the first image in CSS so it fits on all screens?
Thank you a lot!
Use align="left" in img tag.
<img src="img/share.png" class="image_margin" align="left"/>
Hope this will help
At the top of a page I've got two divs, one floated to the left and one to the right. I can place text with a border between them, however, I now need to stack two such areas of text between them.
Here's a Fiddle illustrating my problem: http://jsfiddle.net/TcRxp/
I need the orange box under the green box, with each center aligned with the other. The "legend" (floated to the right) used to be at the same level but is shifted down now.
I tried adding another table to the mix but that didn't help.
Excuse the markup - it's not real slick, I know. A few people have touched this over time and none of us are gurus at this.
And yes, I have lobbied for a designer to be added to the team but it hasn't happened yet.
Thanks,
Paul
UPDATE: Incorporating #Jeremy B's suggestion
Does it have to be via CSS changes? When dealing with scenarios like this, you need to be careful of the order in which the HTML elements are defined.
Look at the modification here: http://jsfiddle.net/TcRxp/8/
I was able to acheive what you needed by changing the order of the three DIVs and using the CSS suggesion from #Jeremy B
Essentially, the logic for the layout is
Draw the float-right content
Draw the float-left content
Draw the content in the middle (as it will now render to the right of the float-left content.
First make your top span a block element to stack them:
<span class="color status active bold" style="display:block">Status:</span>
then float the middle div left as well:
add float:left to #headmiddle in your css
It's always going to be difficult to get the desired results when you're combining CSS and tables-for-layout.
I would suggest simplifying your HTML:
<div id="headleft">a little search form here</div>
<div id="headmiddle">
<div class="active"><strong>Status:</strong> Active</div>
<div class="search">Search results displayed</div>
</div>
<div id="headright">
<dl>
<dt>Legend:</dt>
<dd>Status numero uno</dd>
<dd>Status two</dd>
</dl>
</div>
and your CSS:
div { padding: 2px; }
strong { font-weight: bold; }
#headleft { float: left; font-size: 0.8em; }
#headmiddle { float: left; font-size: 0.8em; }
#headmiddle div { border: 1px solid #000; margin-bottom: 3px; }
.search { background: orange; }
.active { background: #8ed200; }
#headright { float: right; font-size: 0.8em; }
dt { float: left; font-weight: bold; }
dd { margin-left: 4.5em; }
The result is semantically correct HTML, easier to read and therefore easier to modify in the future. Supporting fiddle.
If you need to do it with CSS, see my changes: Fiddle
I added the following:
#headmiddle span.status { display: block }
This will cause your spans to "stack".
I got it by putting together many different sources. Alex Coles' solution was closest right off the bat but the middle wasn't centered. It was much cleaner than my mess too. I started with the code from this post:
<style type="text/css">
.leftit {
float: left;
}
.rightit {
float: right;
}
.centerit {
width: 30%;
margin-right: auto;
margin-left: auto;
text-align: center;
}
.centerpage {
width: 80%;
margin-right: auto;
margin-left: auto;
}
</style>
</head>
<body>
<div class="centerpage">
<div class="leftit">Hello Left</div>
<div class="rightit">Hello Right</div>
<div class="centerit">Hello Middle</div>
</div>
(fiddle for above)
I took the elements Alex cleaned up which got me even closer to my goal, but the center color blocks were way too wide. From this question I learned about "max-width", which ended up being the final piece I needed...or so I thought.
Edit: max-width doesn't work in IE7 quirks mode (which I have to support) so from this page I learned how to tweak my css to work in IE7 quirks mode, IE8, and FF.
The final code (fiddle):
.leftit {
float: left;
font-size: 0.8em;
}
.rightit {
float: right;
font-size: 0.8em;
}
.centerit {
width:220px;
margin-right: auto;
margin-left: auto;
font-size: 0.8em;
}
#headmiddle div {
border: 1px solid #000;
margin-bottom: 3px;
}
.centerpage {
margin-right: auto;
margin-left: auto;
text-align: center;
}
strong { font-weight: bold; }
.search { background: orange; }
.active { background: #8ed200; }
dt { float: left; font-weight: bold; }
dd { margin-left: 4.5em; }
<div class="centerpage">
<div class="leftit">a little search form here</div>
<div class="rightit">
<dl>
<dt>Legend:</dt>
<dd>Status numero uno</dd>
<dd>Status two</dd>
</dl>
</div>
<div class="centerit" id="headmiddle">
<div class="active"><strong>Status:</strong>
Active</div>
<div class="search">Search results displayed</div>
</div>
</div>
Thanks to all the great answers - I learned a lot from this question.
Paul
How do I get the p-tag with text "jon harris" beside the p-tag with text "Room 2"
I have tried float-combinations.. but there is something missing..i guess.
here the html code:
<!DOCTYPE HTML>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Twitter Avatar Scrolling</title>
<link rel="stylesheet" href="css/events.css" />
</head>
<body>
<div class="event">
<img src="images/red.jpg" alt="picture" />
<p>Room 2</p>
<p class="patient-name">Jon Harris</p>
<p class="event-text">This is a pixel. A flying pixel!</p>
<p class="event-timestamp">feb 2 2011 - 23:01</p>
</div>
</body>
</html>
here is the css:
body {
font:13px/1.5 "helvetica neue", helvetica, arial, san-serif;
}
.event {
display:block;
background: #ececec;
width:380px;
padding:10px;
margin:10px;
overflow:hidden;
text-align: left;
}
.event img {
float:left;
}
.event p {
margin:0;
padding-left:60px;
font-weight: bold;
}
.patient-name {
color: #999999;
font-size: 9px;
padding-left: 5px;
}
.event-text{
color: #999999;
font-size: 12px;
padding-left: 5px;
}
.event-timestamp{
color: #000;
padding-left: 5px;
font-size: 9px;
}
Here you go ... http://jsfiddle.net/2N6tu/
You just need to turn the first two <p> elements to inline elements.
Create a wrapper around those two P tags, set the width of those two P tags and add float: left to both e.g:
<div class="event">
<img src="images/red.jpg" alt="picture" />
<div class="event-wrapper">
<div class="event-inner-wrap">
<p class="room-number">Room 2</p>
<p class="patient-name">Jon Harris</p>
</div>
<div class="clear"></div>
<p class="event-text">This is a pixel. A flying pixel!</p>
<p class="event-timestamp">feb 2 2011 - 23:01</p>
</div>
</div>
css
.clear {
clear: both;
}
.event-wrapper {
width: 300px; /*** assuming that image is 80px, i didn't measure ***/
float: left;
}
.event-inner-wrap {
width: 300px; /*** assuming that image is 80px, i didn't measure ***/
}
p.room-number {
width: 150px; /** set as whatever you like, just make sure this width plus the width of the patient name is no bigger than the wrapper width **/
float: left;
}
p.patient-name {
width: 150px; /** set as whatever you like, just make sure this width plus the width of the room number is no bigger than the wrapper width **/
float: left;
}
Good luck.
Edit, because I saw that image you posted after I added this.
Edit again, because you don't need the extra clear: both; and I missed off 2 semi's.
Note, if you end up using Span tags instead of P the same above principle applies, however, the Span will require a display: block; on them if setting widths etc.
have you tried
.event p{display:inline;}
I want to create a worksheet addition of, say, two five digit numbers. Using text-decoration:underline;, I get something like the following:
12345
+ 12345
-------
Wrapping in a div and using
style="width: 8em; margin: 1em; font-family: courier; text-align: right;"
gives me something like the following:
12345
+ 12345
-------
which is marginally better than before. How would accomplish aligning the digits on the ones? To be clear, the digits will be the same length, but the best answer would be robust to two digits of size m and n where m does not necessarily equal n, but I'm willing to trade robustness for not requiring javascript.
12345
+ 12345
-------
^---- align the ones digit
Thanks in advance!
I removed width: 8em and added float: left.
<div style="float: left; margin: 1em; font-family: courier; text-align: right;">
12345<br />
+ 66612345<br />
-------
</div>
Live Demo
I feel like I've misunderstood the problem because this seems too simple a solution :)
This was rather fun to put together: Live Demo.
Note: Only tested on Firefox!
HTML:
<div class="worksheet">
<span>12345</span>
<span class="add">54321</span>
</div>
<div class="worksheet">
<span>123</span>
<span class="sub">45678</span>
</div>
<div class="worksheet">
<span>54321</span>
<span class="add">1234</span>
<span class="sub">987</span>
<span class="add">1357924</span>
</div>
CSS:
.worksheet {
border: 1px dotted #000;
display: inline-block;
font-family: monospace;
margin: 0.5em;
padding: 10px;
text-align: right;
}
.worksheet .add:before {
content: "+";
float: left;
margin-right: 0.5em;
}
.worksheet .sub:before {
content: "-";
float: left;
margin-right: 0.5em;
}
.worksheet span { display: block; }
.worksheet span:last-child {
border-bottom: 2px solid #000;
margin-bottom: 1em;
}