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;}
Related
I am having a hard time centering my logo on the center of my header. When displayed correctly it would look like this: "Name" Logo "Surname" .Being the logo at the center, and the "name" and "surname" displaying at both sides of it, "name" on it's left and "surname" on it's right.
(You'll understand better with the picture I'm posting)
Header: logo not centered
So I would like the circled logo to be the center of the header, then have "Pousada" adapt to it at it's right and same with "Team" at it's left.
This is my CSS and HTML:
*{
font-family: 'Oswald', sans-serif;
}
#rafa {
background-color: #000000;
background-repeat:no-repeat;
background-position: 40% 0;
background-size:30%;
color: #fff;
padding: 0.5rem 0 0 0;
border-top:none;
}
#BJJ {
text-align:center;
height: 4rem;
font-weight: normal;
}
.escudo{
text-align:center;
}
.group:after {
content: "";
display: table;
clear: both;
}
#uno {
text-align:center;
vertical-align:middle;
font-size: 2em;
display:inline-block;
}
#dos {
text-align:center;
font-size:2em;
display:inline-block;
vertical-align:middle;
}
img {
max-width: 15%;
clear:both;
display:inline-block;
vertical-align:middle;
}
ul {
color: #000;
list-style: none;
text-align:center;
background: #fff;
border-bottom: solid #000 1.5px;
padding:0;
height: 2.5em;
border-top:none;
}
li {
display:inline-block;
padding: 0 1em;
border-right: 2px;
}
#welcome{
text-align:center;
}
/************ESTILO LINKS*************/
li a {
text-decoration:underline;
color: #000;
}
.Inicio {
color: #fff;
text-decoration:none;
}
/*****************ARTE SOAVE*******************/
/*****************EL EQUIPO*******************/
/*****************LA ESCUELA*******************/
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<link href="Treehouse Programación/Recursos/normalize.css" rel="stylesheet">
<link href="estilo.css" rel="stylesheet">
<link href="https://fonts.googleapis.com/css?family=Oswald:300,400,700|Roboto+Condensed:300" rel="stylesheet">
<title>Pousada Team Brazilian Jiu-Jitsu</title>
</head>
<body>
<header id="rafa">
<a href="Pousada Team.html" class="Inicio">
<h3 id="BJJ">Brazilian Jiu-Jitsu</h3>
<div class="escudo group">
<h3 id="uno">Pousada</h3>
<img src="309011_3565552909659_642031164_n.jpg"/>
<h3 id="dos">Team</h3>
</div>
</a>
</header>
<nav>
<ul>
<li>Arte soave</li>
<li>El Equipo</li>
<li>La Escuela</li>
</ul>
</nav>
<div id="welcome">
<h3>Bienvenido al equipo</h3>
</div>
<div>
</div>
</body>
</html>
I have tried with float, but didn't do well with it. What I have tried here is to use inline-block to have the 3 elements of this header ("Pousada", "logo" and "Team") align.
Any help with this particular problem I have and any content recommendations (or project practices) to fully understand HTML and CSS principles (like layouts and positioning) so I can learn them and move on to more functional aspects like Javascript, will be HUGELY appreciated, you can totally expect any help back that I can provide.
Thanks in advance, and if there's anything I can do to make this place better, please let me know.
Best regards,
Miguel
Here is a quick fix for you:
I have added a background color to the div's to help you identify them.
HTML:
Add your header, add your logo inside the header... then add both the first and the last names inside of the logo div. By adding the names inside of the logo; when ever you move the logo the names will move relative to it.
<div class="Header">
<div class="Logo">
<div class="FirstName">FirstName</div>
<div class="LastName">LastName</div>
</div><!-- End CenterContent -->
</div><!-- End Header -->
CSS:
I use the single line method of writing my css.
You can easily adjust the dimensions of the logo DIV and you can move the names around as needed.
.Header{position:relative; width:100%; height:300px; display:block; float:left; background:SILVER;}
.Logo{position:relative; margin:auto; width:200px; height:200px; background:BLACK;}
.Logo > .FirstName{position:absolute; top:90px; left:-100px; min-width:1em; text-align:center;}
.Logo > .LastName{position:absolute; top:90px; right:-100px; min-width:1em; text-align:center;}
Your Welcome.
I have looked at other examples here, but seem to work. I have a small amount of text and an image aligned left inside a blue div. As the page gets narrower the text sizes down properly in the div, but the image remains in the top left of the div. I would like it to stay in the vertical center of the div. It can get larger or stay the same size, I just need it to move to center.
JSfiddle
body, h4 {
font-family:Gotham, "Helvetica Neue", Helvetica, Arial, sans-serif;
font-size:13px;
color:#333333;
}
* {
padding:0px;
}
.warning {
line-height:1.5em;
font-size:16px;
color:#0c203d;
padding-left:60px;
}
.blueBox {
background-color:#D4DDF7;
min-height:50px;
max-height:150px;
padding:0;
text-align: left;
border-radius:10px;
-moz-border-radius:10px;
-webkit-border-radius:10px;
}
.icon {
padding:0;
display:table-cell;
vertical-align: middle;
float:left;
}
#media only screen and (min-width : 735px) and (max-width:1400px) {
.warning {
font-size:16px;
padding-top:14px;
}
#media only screen and (min-width : 321px) and (max-width:734px) {
.warning {
font-size:13px;
padding-top:1px;
}
}
#media only screen and (min-width : 200px) and (max-width:320px) {
.warning {
font-size:12px;
padding-top:1px;
}
}
<div>
<div id="ctl00_ContentPlaceHolder1_countyText">
<p class="text">To find road conditions use the County selection box or simply click on a County on the searchable map. To view ALL Counties at once, Choose ALL COUNTIES from the dropdown, and click Go.
<br />Map is not visible on small screens.</p>
<div class="blueBox">
<img class="icon" src="https://placeimg.com/50/50/arch/grayscale" alt="Arrow Icon" width="50px" height="50px" />
<h4 class="warning">THIS VIEW DOES NOT CONTAIN STORM RELATED EMERGENCY ROAD CONDITIONS.</h4>
</div>
<!-- End blueBox -->
<p>To view our progress on STORM Related closings, Visit our Work Plan and Current Closures site.</p>
<p><span id="ctl00_ContentPlaceHolder1_lblMessageCty" class="bText rText">See Results Below</span>
</p>
</div>
</div>
<br/>
<br/>
I guess this is what you are looking for:
You must specify display:inline-table to your .icon and .warning class. Also as you have image so you must not directly apply vertically-align:middle;, better if you wrap it around div/span.
Working : Fiddle
body,
h4 {
font-family: Gotham, "Helvetica Neue", Helvetica, Arial, sans-serif;
font-size: 13px;
color: #333333;
}
* {
padding: 0px;
}
.warning {
display: table-cell;
font-size: 16px;
color: #0c203d;
padding-left: 60px;
vertical-align: middle;
}
.blueBox {
background-color: #D4DDF7;
min-height: 50px;
max-height: 150px;
padding: 0;
text-align: left;
border-radius: 10px;
-moz-border-radius: 10px;
-webkit-border-radius: 10px;
display: table;
}
.icon {
display: table-cell;
vertical-align: middle;
}
#media only screen and (min-width: 735px) and (max-width: 1400px) {
.warning {
font-size: 16px;
}
#media only screen and (min-width: 321px) and (max-width: 734px) {
.warning {
font-size: 13px;
}
}
#media only screen and (min-width: 200px) and (max-width: 320px) {
.warning {
font-size: 12px;
}
}
<body>
<div>
<div id="ctl00_ContentPlaceHolder1_countyText">
<p class="text">To find road conditions use the County selection box or simply click on a County on the searchable map. To view ALL Counties at once, Choose ALL COUNTIES from the dropdown, and click Go.
<br />Map is not visible on small screens.</p>
<div class="blueBox"> <span class="icon"><img src="https://placeimg.com/50/50/arch/grayscale" alt="Arrow Icon" width="50px" height="50px" /></span>
<h4 class="warning">THIS VIEW DOES NOT CONTAIN STORM RELATED EMERGENCY ROAD CONDITIONS.</h4>
</div>
<!-- End blueBox -->
<p>To view our progress on STORM Related closings, Visit our Work Plan and Current Closures site.</p>
<p><span id="ctl00_ContentPlaceHolder1_lblMessageCty" class="bText rText">See Results Below</span>
</p>
</div>
</div>
<br/>
<br/>
</body>
Remove the float from the .icon element and margin-left: auto and margin-right: auto. Put the below code in whichever breakpoint you'd like to see this behavior.
.icon {
float: none !important;
margin: 0 auto;
}
Your #media queries have some issues, so I've edited them in this example.
body,h4 {
font-family:Gotham,"Helvetica Neue",Helvetica,Arial,sans-serif;
font-size:13px;
color:#333;
}
* {
padding:0;
}
.warning {
line-height:1.5em;
font-size:16px;
color:#0c203d;
padding-left:60px;
}
.blueBox {
background-color:#D4DDF7;
min-height:50px;
max-height:150px;
padding:0;
text-align:left;
border-radius:10px;
-moz-border-radius:10px;
-webkit-border-radius:10px;
}
.icon {
padding:0;
display:table-cell;
vertical-align:middle;
float:left;
}
#media screen and (max-width: 480px) {
.icon {
float: none !important;
margin: 0 auto;
}
<body>
<div>
<div id="ctl00_ContentPlaceHolder1_countyText">
<p class="text">To find road conditions use the County selection box or simply click on a County on the searchable map. To view ALL Counties at once, Choose ALL COUNTIES from the dropdown, and click Go.
<br />Map is not visible on small screens.</p>
<div class="blueBox">
<img class="icon" src="https://placeimg.com/50/50/arch/grayscale" alt="Arrow Icon" width="50px" height="50px" />
<h4 class="warning">THIS VIEW DOES NOT CONTAIN STORM RELATED EMERGENCY ROAD CONDITIONS.</h4>
</div>
<!-- End blueBox -->
<p>To view our progress on STORM Related closings, Visit our Work Plan and Current Closures site.</p>
<p><span id="ctl00_ContentPlaceHolder1_lblMessageCty" class="bText rText">See Results Below</span>
</p>
</div>
</div>
<br/>
<br/>
</body>
When using media queries at specified breakpoints, you're typically safe to use display: table on a parent and display: table-cell; vertical-align: middle; on the children in order to vertically align their contents.
In the snippet below, I have removed most of your HTML to better outline the elements to which the CSS actually applies. This should help anyone else who happens to land on this question. Also, I replaced the img tag since an arrow in this case is not semantic content and it made things easier to style.
body { font-family: Gotham, "Helvetica Neue", Helvetica, Arial, sans-serif; }
/* ------------------ Start Important Part ------------------ */
.warning {
display: table; /* Set container as table */
width: 100%;
background-color: #D4DDF7;
}
.warning > * {
display: table-cell; /* Set children as table-cell */
padding: 15px;
vertical-align: middle; /* Vertically center children */
}
/* ------------------- End Important Part ------------------- */
/* Icon */
.warning > .icon { width: 50px; }
.warning > .icon::after {
content: "";
display: inline-block;
background: url("https://placeimg.com/50/50/arch/grayscale");
width: 50px;
height: 50px;
}
/* Warning text */
.warning > p {
line-height: 1.5em;
font-size: 16px;
color: #0c203d;
font-weight: bold;
}
<div class="warning">
<span class="icon"></span>
<p>THIS VIEW DOES NOT CONTAIN STORM RELATED EMERGENCY ROAD CONDITIONS.</p>
</div>
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;
}
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)
Okay, I've seen loads of information about this, but none of the suggested fixes worked for me, or perhaps I just didn't properly understand, so if someone could break this down elementary for me that'd be great, or point me to another link that does. I have a series of divs to make my header, a main container with the logo inside floating left, and then another container floating right, that works all fine, but the internal "menu" container contains two divs in it, one supposed to be at the top, the other at the bottom... to visualize it, its login or register links at the top, and a series of menu links at the bottom. The problem is the ones that are supposed to be at the bottom are actually going to the top, right under the register and login links. If that didn't give you a visual picture, then here is the actual header http://www.sunnahspace.com/pages/header.php i've tried loads of stuff, maybe I've just been trying it wrong though. i've tried the whole, position absolute stuff and honestly i don't even know what that means, but I get the feeling I'm headed in the right direction. Thanks in advance for anyone's help!
<style type="text/css">
.header_links {
font-family: GeosansLight;
font-size: 14px;
color: #FFF;
text-decoration: none;
}
.header_menu {
font-family: GeosansLight;
font-size: 18px;
color: #FFF;
text-decoration: none;
}
#header {
background-image:url(../img/header_bg.jpg);
background-repeat:repeat-x;
width:100%;
height:111px;
}
#logo {
float:left;
margin-left:20px;
}
#header_menu_container {
float:right;
margin-right:20px;
height:111px;
}
#header_menu_top {
margin-top:10px;
vertical-align:top
}
#header_menu_bottom {
margin-top:10px;
vertical-align:bottom
}
</style>
<div id="header">
<div id="logo"> <img src="../img/logo.png" width="390" height="105" alt="SunnahSpace">
</div>
<div id="header_menu_container">
<div id="header_menu_top" align="right">Login <span class="header_links">|</span> <span class="header_links">Join</span>
</div>
<div id="header_menu_bottom" align="right" style="vertical-align:bottom"><span class="header_menu">Home</span><span class="header_menu"> | Profile | About | Contact</span>
</div>
</div>
</div>
<style type="text/css">
.header_links {
font-family: GeosansLight;
font-size: 14px;
color: #FFF;
text-decoration: none;
}
.header_menu {
font-family: GeosansLight;
font-size: 18px;
color: #FFF;
text-decoration: none;
}
#header {
background-image:url(../img/header_bg.jpg);
background-repeat:repeat-x;
width:100%;
height:111px;
}
#logo {
float:left;
margin-left:20px;
}
#header_menu_container {
float:right;
margin-right:20px;
height:111px;
}
#header_menu_top {
margin-top:10px;
vertical-align:top
}
#header_menu_bottom {
margin-top:10px;
vertical-align:bottom
}
</style>
<div id="header">
<div id="logo"> <img src="../img/logo.png" width="390" height="105" alt="SunnahSpace">
</div>
<div id="header_menu_container">
<div id="header_menu_top" align="right">Login <span class="header_links">|</span> <span class="header_links">Join</span>
</div>
<div id="header_menu_bottom" align="right" style="vertical-align:bottom"><span class="header_menu">Home</span><span class="header_menu"> | Profile | About | Contact</span>
</div>
</div>
</div>
add the following to your styles
#header_menu_bottom {
bottom: 15px;
position: absolute;
text-align: right;
width: 300px;
right: 0;
}
#header_menu_container {
position: relative;
}