So I've been doing a website for an assignment and for some reason I can't seem to align the content of the website. it's a simple layout. It's pure content no sidebars or anything. Here'es the HTML for the content:
<!-- Begin Content Column -->
<div id="content">
<img src="img8.png" style="width: 460px; height: 100px;" alt="pokemon">
<br>Pokemon:
The First Movie
<br>Soundtracks
</div>
<!-- End Content Column -->
And here's the CSS:
body {
background: black;
font-family: Trajan Pro,Arial, Helvetica, sans-serif;
font-size: 28px;
text-align: center;
background-image: url('img2.jpg');
background-repeat: repeat-x;
background-position: bottom center;
background-size: 460px 300px;
}
#content {
float: left;
color: #333;
border: 1px solid #ccc;
background: transparent;
margin: 0 auto;
height: 1024px;
width: 460px;
display: inline;
}
Thank you all in advance. I'm trying to align the content's image to the background's image to make like a fading effect, but can't center the content.
Change the style of content to
display:inline;
All you should have to do is remove float: left; and display: inline; from the #content css selector.
Remove float:left; from #content and add display:block; to it. That should center it.
Remove the following from the CSS #content :
display: inline;
float: left;
Related
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;
}
My website has an image on the left which scales based upon browser size. To the right is some text.
The problem I have is the div on the right will drop to underneath the image on the left when the browser is made smaller, and only when the image is now the only item on the screen will it start to shrink
https://jsfiddle.net/0gyhrve2/
What I'm trying to achieve is that when you change the width of the page, the 2 divs will remain side by side, but the image on the left will shrink instead of the text dropping underneath.
My effort
<div class="outer">
<div class="img">Words</div>
<div class="other">More words</div>
</div>
CSS
.img {
float: left;
background-image: url("http://bootstrapbay.com/blog/wp-content/uploads/2014/05/yellow-taxi_vvvjao.png");
background-repeat: no-repeat;
background-size: 100%;
width: 100%;
height: 349px;
font-weight: bold;
text-shadow: 1px 1px 2px #000;
max-width: 300px;
}
.other{}
Is this what are you after: https://jsfiddle.net/0gyhrve2/3/ ?
CSS:
.img {
background-image: url("http://bootstrapbay.com/blog/wp-content/uploads/2014/05/yellow-taxi_vvvjao.png");
background-repeat: no-repeat;
background-size: 100%;
width: 100%;
height: 349px;
font-weight: bold;
text-shadow: 1px 1px 2px #000;
max-width: 300px;
}
.imgContainer {
float: left;
width: 75%;
}
.other {
float: left;
width: 25%;
}
HTML:
<div class="outer">
<div class="imgContainer"><div class="img">Words</div></div>
<div class="other">More words</div>
</div>
Well. I would just add these lines of code:
CSS
.img,
.other { display: inline-block; }
.outer { white-space: nowrap; }
Example at jsfiddle
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>