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)
Related
I am trying to align the register button to the vertical middle of the text block in Wordpress. Here is my css:
img.classthumb {
border: 1px solid #d0cccc;
width: 80%;
}
#cldc {
width: 55%;
float: left;
}
#thumbimg {
float: left;
}
.clearfix:after{
visibility:hidden;
display:block;
font-size:0;
content:" ";
clear:both;
height:0;
}
.clearfix {
display:inline-block;
clear:both;
}
* html .clearfix {height:1%;}
.clearfix{display:block;}
#media (max-width:400px) {
#cldc {
float: none;
width: 95%;
text-align: justify;
}
#thumbimg {
float: none;
width: 40%;
margin-bottom: 20px;
}
}
.class {
width:100%;
padding-top: 15px;
}
p.name {
font-family: IowanOldStyle-BlackItalic;
font-size: 16px;
color: #686663;
padding-bottom: 5px;
letter-spacing: 2px;
line-height: 1;
}
p.dates {
font-family: IowanOldStyle-BlackItalic;
font-size: 18px;
color: #686663;
padding-bottom: 2px;
letter-spacing: 2px;
}
p.description {
padding-bottom: 10px;
}
p.location {
}
.event_register {
display: inline;
float: right;
background-color: #e89000;
color: black;
font-family:IowanOldStyle-Bold;
letter-spacing: 1px;
}
Here is my HTML
<div class="class clearfix">
<div id ="thumbimg"><img src="http://localhost:8080/wordpress/wp-content/uploads/2016/07/classthumb.jpg" alt="classthumb" width="123" height="208" class="alignnone size-full wp-image-82 classthumb" />
</div>
<div id="cldc">
<p class= "name">CLASS NAME</p>
<p class= "description">The Big Oxmox advised her not to do so, because there were thousands of bad Commas, wild Question Marks and devious Semikoli, but the Little Blind Text didn’t listen. She packed her seven versalia, put her initial into the belt and made herself on the way. When she reached the first hills of the Italic Mountains, she had a last view back on the skyline of her hometown Bookmarksgrove, the headline of Alphabet Village and the subline of her own road, the Line Lane. Pityful a rethoric question ran over her cheek, then Far far away, behind the word mountains, far from the countries Vokalia and Consonantia, there live the blind texts.</p>
<p class= "dates">Dates</p>
<p class= "location">
Aug 1 - 2, 9AM - 5PM
<em>Salt Lake City, UT</em><button class="event_register">Register</button></p>
<p class= "location">
Aug 12 - 13, 9AM - 5PM
<em>Chicago, IL</em><button class="event_register">Register</button></p>
<p class= "location">
Aug 15 - 16, 9AM - 5PM
<em>Austin, TX</em><button class="event_register">Register</button></p>
Aug 18 - 19, 9AM - 5PM
<em>Denver, CO</em><button class="event_register">Register</button></p>
</div>
</div>
Here is a screen shot where misalignment can be seen. I also need the button to stack underneath the dates in mobile view. Please help! Thank you so much!
enter image description here
You could try adding some CSS along these lines:
.location {
position: relative; /* Required for button positioning */
padding-right: 100px; /* Width of button, plus about 40 pixels to ensure text doesn't crash with button */
}
.location .event_register {
position: absolute; /* Required for positioning the button */
top: 50%; /* Vertically align centre */
right: 0; /* Align right */
margin-top: -10px; /* Half the height of the button to centre correctly */
}
You could wrap that in a media query such as #media (min-width: 960px) to only apply these rules on desktop devices.
For other devices, you could add the following rules to get the button underneath the other text (if you wrapped the above code in a media query, you don't need a media query here):
.location .event_register {
clear: left;
}
For your button styles, you would want to remove the display: inline; for my styles above to work correctly.
For some reason text1 goes to the next column instead of under the image like it should unless i use a clear tag. The problem with using a clear tag is i cannot add text2 around where text1 was previously before the clear tag which is why you see a big space before the paragraphs.
Also text-align doesn't center text on the page. It centers text around its contents. How do i fix this?
Jsfiddle - https://jsfiddle.net/p6eocccj/
HTML
<div id="div1">
<p id="text0"><span id="sp1pg4">About me</span></p>
<img id="img1" src ="images/hack.jpg"/>
<br>
<p id="text1"><strong>Image Courtesy Homer Simpson</strong><br></br>
www.homersimpsoniscooltoo.com</p>
<p id="text2">
Hi there!
<br></br>
I'm bob, a coool designer and developer<br>
from Far far coolioland, Australia. I<br>
specialise in cooking, shipping, shopping,<br>
camping and turning coffee into popcorn. My<br>
approach to buytying is this, make it clean and<br>
simple but also focus on the buying for men. This<br>
is what differentiates poor people from great chimps.<br>
Whether you want to build a house for as long as<br>
business, a personal toy or just ask you some<br>
</p>
</div>
CSS
#div1 {
width: max-width;
height: 1650px;
background-color: #ECECEC;
}
#text0 {
text-align: left;
padding-top: 25px;
padding-left:150px;
}
#img1 {
float:left;
margin-top: 25px;
margin-left:150px;
width: 220px;
height: 220px;
border-radius: 50%;
}
#text1 {
clear:left;
float:left;
padding-left:160px;
font-size:13px;
line-height:80%;
}
#text2 {
padding-top: 100px;
line-height: 140%;
text-align: center;
font-family: sans-serif;
font-size: 15px;
}
Because when you apply float rule to any element then that element is not part of Normal Document Flow and it will wrap texts around it. Either remove float or use clearfix hack.
Here is clearfix hack-
.clearfix::after {
display: table;
content: '';
clear: both;
}
P.S: I have just removed float: left from image. If you want to use hack then apply clearfix class to parent of image.
#div1 {
width: max-width;
height: 1650px;
background-color: #ECECEC;
}
#text0 {
text-align: left;
padding-top: 25px;
padding-left:150px;
}
#img1 {
margin-top: 25px;
margin-left:150px;
width: 220px;
height: 220px;
border-radius: 50%;
}
#text1 {
clear:left;
float:left;
padding-left:160px;
font-size:13px;
line-height:80%;
}
#text2 {
padding-top: 100px;
line-height: 140%;
text-align: center;
font-family: sans-serif;
font-size: 15px;
}
<div id="div1">
<p id="text0"><span id="sp1pg4">About me</span></p>
<img id="img1" src ="images/hack.jpg"/>
<br>
<p id="text1"><strong>Image Courtesy Homer Simpson</strong><br></br>
www.homersimpsoniscooltoo.com</p>
<p id="text2">
Hi there!
<br></br>
I'm bob, a coool designer and developer<br>
from Far far coolioland, Australia. I<br>
specialise in cooking, shipping, shopping,<br>
camping and turning coffee into popcorn. My<br>
approach to buytying is this, make it clean and<br>
simple but also focus on the buying for men. This<br>
is what differentiates poor people from great chimps.<br>
Whether you want to build a house for as long as<br>
business, a personal toy or just ask you some<br>
</p>
</div>
Because you add float left to to image tag..remove float on image or add clear to text elements
I have this sample:
http://jsfiddle.net/3gmeK/298/
CSS and HTML:
div { padding:10px 20px; background-color:#F51; }
p { text-align:left; padding:5px; background-color:#333; color:#fefefe; }
<div>
<p>
There are many fish in the sea! So lovely!<br>
many fish in the sea! So lovely!
</p>
</div>
I want my text in its current form is aligned in the center.
I do not want to use "text-align: center;"
Inside this div my text means to be in current form.
I hope I managed to explain better what they want to do.You can help me solve this problem?
Thanks in advance!
This can be done by adding an extra span around the text:
Add text-align: center; to p
Add an extra span around the text
Add a new span selector with display: inline-block; to make the span center in relation to the p and text-align: left; to shift it's text to the left
div {
background-color: #F51;
padding: 10px 20px;
}
p {
background-color: #333;
color: #fefefe;
padding: 5px;
text-align: center;
}
span {
display: inline-block;
text-align: left;
}
<div>
<p>
<span>There are many fish in the sea! So lovely!<br>
many fish in the sea! So lovely!</span>
</p>
</div>
You can also try this,
Add <span> tag for content and add this css
p span{ display: table;margin:auto;}
http://jsfiddle.net/3gmeK/304/
When I was working on my site I walked towards a problem. I want to have the <.p> element directly after my <.a> element, so it is not a line under it.
How it is now:
Login
\
Register
How I want it:
Login \
Register
You can visit my site if you want to take a look:
v14rkoende.helenparkhurst.net
This is my html code:
<div class=logreg>
<div class=logregb>
<p class=loginl ><a href=login.html class=loginr>Login</a> /</p>
<p class=loginl ><a href=register.html class=loginr>Registreer</a></p>
</div>
</div>
This is my CSS code:
.loginr {
font-family: Century Gothic;
color: white;
font-size: 12px;
margin-bottom: 0px;
margin-top: 0px;
text-decoration: underline;
}
.loginl {
font-family: Century Gothic;
color: white;
font-size: 12px;
text-decoration: none;
margin: 0px;
}
.logreg {
margin-left:-20px;
}
.logregb {
width: 0px;
margin-left: auto ;
margin-right: auto ;
margin-top: -40px;
}
Thanks for helping me out
Solution was to make the width bigger so for example:
.logregb {
width: 100px;
margin-left: auto ;
margin-right: auto ;
margin-top: -40px;
}
Thanks to all people for the fast awnsers!
try this (UNTESTED):
.loginl a {
float:left;
}
The width of your parent DOM element is to small. Remove the .logregb {width: 0px;} because it results in 2 line breaks.
Alternatively
Add nowrap to your CSS as following:
.loginl {
[...]
white-space: nowrap;
}
Here is the JSFiddle: http://jsfiddle.net/j3t47pqg/1/
p a {
display:inline-block;
}
<div class=logreg>
<div class=logregb>
<p class=loginl >
<a href=login.html class=loginr>Login</a>
<a href=register.html class=loginr>Registreer</a>
</p>
</div>
</div>
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;}