To preface: I've come across a number of other solutions but have had no luck finding one that works. I'm currently using this answer for align my text to the bottom of my divs, but without any luck.
For whatever reason, my vertical-align: bottom; property does not affect the css of the page at all. What am I doing wrong here if I want to align the text to the bottom of the image?
index.html
<body>
<div class="header">
<div class="container">
<div class="pull-left">
What's This?
</div>
<img src="http://placehold.it/75x75" />
<div class="pull-right">
About
</div>
</div>
</div>
<!-- Modules -->
<!-- Controllers -->
<!-- Services -->
</body>
main.css
html, body {
margin: 0;
padding: 0;
font-family: 'Open Sans', sans-serif;
}
body {
background-color: #FF3B4E;
}
.container {
max-width: 1200px;
margin: 0 auto;
}
.header {
background-color: white;
text-align: center;
height: 125px;
}
.header img {
margin: 25px 0;
}
.header .pull-left{
border: 1px solid black;
height: 75px;
margin-top: 25px;
top: 0;
line-height: 75px;
vertical-align: bottom;
}
.header .pull-right {
border: 1px solid black;
height: 75px;
margin-top: 25px;
top: 0;
line-height: 75px;
vertical-align: bottom;
}
The reason I have boxes around pull-left and pull-right is for visual purposes when dealing with this problem. I'll remove the borders once I can get the text to align properly. Thanks for any help!
jsfiddle: https://jsfiddle.net/rtc498uk/
EDIT: My goal is to get the text to align like this:
.pull-right a, .pull-left a{
line-height: 1em;
vertical-align: bottom;
}
Related
i have a question about how to put my input text box in the center of the page and be responsive.
Here is the HTML code:
<body>
<div class="container container-padding50">
<input type="text" class="js-userinput container-textinput" placeholder="mySearchApp">
</div>
<div class="message">
<p>input anything you want search and press Enter</p>
</div>
<div class="js-container">
<!-- image shows here -->
</div>
<script src="javascript/main.js"></script>
</body>
and i have tried CSS with:
body {
width: 80%;
max-width: 1024px;
margin: 0 auto;
}
.container-padding50 {
padding-top: 50px;
left:50%;
}
.container-textinput {
text-aligen:center;
width: 80%;
/*display: relative;*/
left: 50%;
padding: 20px;
font-size: 16px;
font-family: Helvetica, sans-serif;
border:none;
border-bottom: 2px solid black;
}
I am intend to set my input field looks simple as only an underline with "mySearchApp", but I have tried with left:50% in order to make this in the middle of the page, could someone tell me why this does not work? Do I miss something here?
In order to use the left property, the element must be positioned.
The left CSS property participates in specifying the horizontal position of a positioned element. It has no effect on non-positioned elements.
https://developer.mozilla.org/en-US/docs/Web/CSS/left
Try this:
body {
width: 80%;
max-width: 1024px;
margin: 0 auto;
}
.container-padding50 {
position: relative; /* NEW */
padding-top: 50px;
height: 80px; /* NEW */
}
.container-textinput {
position: absolute; /* NEW */
left: 50%;
transform: translateX(-50%); /* NEW; see note below */
text-align: center;
width: 80%;
padding: 20px;
font-size: 16px;
font-family: Helvetica, sans-serif;
border: none;
border-bottom: 2px solid black;
}
<div class="container container-padding50">
<input type="text" class="js-userinput container-textinput" placeholder="mySearchApp">
</div>
<div class="message">
<p>input anything you want search and press Enter</p>
</div>
<div class="js-container">
<!-- image shows here -->
</div>
Why use transform when centering:
Element will not stay centered, especially when re-sizing screen
I am new to HTML and CSS and am having trouble positioning and aligning simple text. I am trying to put the text on the right half of the page and have the text be lined up vertically along the first letter of every line. Right now, the header is all the way on the right side of the page, half cut off. The rest of the the rest of the text is not stacked up on top of one another. Rather, there is one block of text on the left, with the other two stacked on top of each other on the right. I have been stuck on this for hours and have read every article on positioning and alignment, but I can't seem to get it. Thanks for the help!
<div class="aboutme"><h3 id="hello">Header</h3></div>
<div class="aboutme"><p id="school">text</p>
</div>
<div class="aboutme"><p id="personal">
text</p>
</div>
<div class="aboutme"><p id="thanks">
text</p>
</div>
.aboutme > *{
font-family: Avenir Next;
display: inline-block;
text-align:left;
float:left;
margin: 0.5em 0.5em 0.5em 0.5em;
position:relative;
left:4em;
}
#hello{
font-size: 3em;
color: #282828;
right: 3.47em;
font-weight: lighter;
position:relative;
text-align: left;
float: right;
margin: 1em 1em 0em 1em;
}
#school {
width: 30em;
clear:right;
}
#personal {
width: 30em;
clear:right;
}
#thanks {
width: 30em;
clear:right;
}
You need to add margin-left: 50% to the about me class and delete the other positioning you have added.
.aboutme > *{
font-family: Avenir Next;
display: block;
margin-left: 50%
}
#hello{
font-size: 3em;
color: #282828;
font-weight: lighter;
}
#school {
width: 30em;
}
#personal {
width: 30em;
}
#thanks {
width: 30em;
}
<div class="aboutme"><h3 id="hello">Header</h3></div>
<div class="aboutme"><p id="school">text</p>
</div>
<div class="aboutme"><p id="personal">
text</p>
</div>
<div class="aboutme"><p id="thanks">
text</p>
</div>
Link to JSFiddle: https://jsfiddle.net/dLy932Lh/
EDIT: Adding a div to the left side
#leftHalf {
display: inline-block;
width: 50%;
height: 200px;
padding: 0;
margin: 0;
}
#rightHalf {
display: inline-block;
width: calc(50% - 10px);
height: auto;
padding: 0;
margin: 0;
background-color: #FFF;
}
.aboutme > *{
font-family: Avenir Next;
display: block;
}
#hello{
font-size: 3em;
color: #282828;
font-weight: lighter;
}
#school {
width: 30em;
}
#personal {
width: 30em;
}
#thanks {
width: 30em;
}
<div id="container">
<div id="leftHalf">
</div>
<div id="rightHalf">
<div class="aboutme">
<h3 id="hello">Header</h3>
</div>
<div class="aboutme"><p id="school">text</p>
</div>
<div class="aboutme">
<p id="personal">text</p>
</div>
<div class="aboutme">
<p id="thanks">text</p>
</div>
</div>
</div>
It is important to have the display set to inline-block for the left and right divs so that they can both be on the same line (hence the inline) and they can have heights and widths (hence the block).
Put any content you want on the left side of the page in the left div and make sure that it's width is not more than 50%.
I hope this solution works for you!
Just wanna ask for your help regarding my markup, I am trying to do exactly the same like this image:
http://prntscr.com/6wrpr3
Here's my markup:
<div id="two-box">
<div class="wrapper clearfix">
<div class="column blue">
<div id="circle">
<div id="content">
<h2>PARALLAX</h2>
<h1>Text</h1>
<h2>ARE COOL!</h2>
</div>
</div>
</div>
<div class="column red">
<div id="circle-red">
<h2>LET IT</h2>
<h1>Fade</h1>
<h2>RIGHT NOW!</h2>
</div>
</div>
</div>
</div>
<div id="carport">
<div class="wrapper clearfix">
<div id="starynight"></div>
<div id="car"></div>
<div id="road"></div>
</div>
</div>
ANd now for my CSS:
.wrapper {
width: 90%;
margin: 0 auto;
max-width: 1140px;
}
.two-box{
width: 100%;
}
.column{
width: 50%;
position: relative;
padding: 40px 0;
}
.blue{
background-color: #3498db;
float: left;
}
.red{
background-color: #e74c3c;
float: right;
}
#content{
margin-top: 150px;
}
.column h2{
color: #fff;
font-family: 'Lato', sans-serif;
font-size: 3.5em;
font-weight: 300;
line-height: 1em;
text-align: center;
margin: 0;
}
.column h1{
color: #fff;
font-family: 'Pacifico', sans-serif;
font-size: 4.2em;
line-height: 0em;
text-align: center;
border-top: 4px solid #fff;
border-bottom: 4px solid #fff;
padding: 40px;
margin: 0;
}
#circle{
background-color: #3aa3e9;
border-radius: 50%;
width: 450px;
height: 450px;
margin: 0 auto;
}
#circle-red{
background-color: #f25a4a;
border-radius: 50%;
width: 450px;
height: 450px;
margin: 0 auto;
}
#road{
background: url('http://arubacontests.com/wp-content/uploads/2015/04/road.jpg') no-repeat center;
width: 1020px;
height: 145px;
display: block;
}
#car{
background: url('http://arubacontests.com/wp-content/uploads/2015/04/car.png') no-repeat center;
width: 325px;
height: 125;
display: block;
position: absolute;
z-index: 9999;
}
#starynight{
background: url('http://arubacontests.com/wp-content/uploads/2015/04/starynight.jpg') no-repeat center;
width: 1012px;
height: 768px;
display: block;
}
Here's the Codepen:
Let me know if there are things on my markup and CSS that i need to fix or show me the actual codepen. Thanks!
Note: The main issue here is the positioning of elements. Let's say I want the text and circle to be align together and not have a padding. Similar thing with the background and the car image they wont just align at all.
Something like this?
http://jsfiddle.net/4kk1fyjg/
I basically set the background-position to cover, fixed the car height (missing px at the end) and set the wrapper position to relative so that the car should be absolute positioned according to the container.
let me know if this works as expected.
Not sure about the car position, but you can adjust the position changing the right or left property
EDIT
Here you are:
http://jsfiddle.net/4kk1fyjg/2/
Just wrap the content inside another div, set the circle position to relative, display as table, the new wrapping div as table-row and the #content as table-cell, then make the table cell vertically align in the middle and that should be it.
You miss <div id="content"> in circle-red.
Remove width from #starnight and add background-size: 100% do the same for #road.
To #car change position to relative and add:
float:right;
bottom:100px;
right:150px;
To #content remove margin-top and add padding-top:125px;
And finaly for .column h1 change margin to margin: 0 40px;
hope this work how expected
JSFiddle
Need help to fix the footer. One of the boxes fals out of the footer. All 3 should be in a line, next to each together. The Css is uploaded and html showed. However i've tried a lot of stuff but seems nothing to be working. however the right box always out of the footer, i cloudn't figure out the problem
so please it would be great to get some help and understand exactly where i did go wrong so i can learn it
thank you :D
Css and html
<%-- Footer --%>
<div id="footer">
<div id="footer_placement">
<div id="left">
<p></p>
</div>
<div id="middel">
<p></p>
</div>
<div id="right">
</div>
</div>
</div>
<%-- Footer --%>
#footer {
bottom: 0;
width: 100%;
display: block;
background-color: #fff;
max-height: 50px;
}
#footer_placement {
max-width: 1024px;
margin: 0 auto;
display: block;
max-height:50px;
}
#right {
float: right;
height: 50px;
width: 298px;
background-color:black;
}
#right img {
height: 50px;
width: 50px;
}
#middel {
height: 50px;
margin: 0 auto;
width: 300px;
background-color:black;
}
#middel p {
text-align: center;
color: #321a51;
font-size: 12px;
font-family: muli;
}
#left {
width: 298px;
height: 50px;
float:left;
background-color:black;
}
#left p {
text-align: center;
color: #321a51;
font-size: 12px;
font-family: muli;
}
use display:inline-block; for this ids: middle - left - right
Fiddle
Your problem is the width of the left right and middle divs .
They don't really add up .. try to change the width .. make it smaller
jsFIDDLE example
I am css beginner and I got a little problem. I am trying to make simple header with logo on the left and some elements on the left side of the header (util). The code is below. It works but I set my header background to Green color and it missing when I open the page. What have I done wrong?
<div id="wrapper">
<div id="header">
<div id="logo">
</div>
<div id="util">
Vladimir Vucetic
</div>
</div>
</div>
body
{
padding: 0;
margin: 0;
font: small Arial, Helvetica, Verdana, sans-serif;
}
#wrapper
{
border-left: 1px solid #000000;
border-right: 1px solid #000000;
margin-left: 20%;
margin-right: 20%;
}
#header
{
background-color: Green;
}
#logo
{
background: url(/images/logo.gif);
background-repeat: no-repeat;
width: 94px;
height: 24px;
float: left;
}
#util
{
padding: 0;
float: right;
}
You have floated elements in your header. That's why it behaves like it has no children. So try
#header
{
background-color: #0f0;
overflow: hidden;
}
This looks like a clearing issue. Due to the fact that you have two floated elements in the parent container you will need to 'clear' them. You can do this in multiple ways.
1) Apply the following to the header:
#header
{
overflow:hidden;
height: 1%;
}
OR
2) Add a clearing div before closing the header div
<div style="clear:both"></div>