This is my first question, so I hope it adheres to the standards. I am trying to move my child div to the bottom of the parent div. I read that the positioning of the parent div has to be set to relative and the positioning of the child div has to be set to absolute. Then, bottom has to be set to 0 for the child div to move down.
<html>
<style type="text/css">
.card {
position:relative;
/* Don’t change these */
float: left;
box-sizing: border-box;
/* Feel free to play around with these */
text-align: center;
border-style: double;
border-width: 3px;
background: #84a0d7;
line-height: 100px;
height: 100px;
/* Change the width to get a different layout */
width: 33.33%;
}
.comment {
font-size:9pt;
color:white;
font-family:Verdana;
line-height:normal;
position:absolute;
/* Here, I set top to 0. If I change that line to bottom:0;
the Div moves up instead of down. Could someone help me
figure out why that happens? */
top:0;
text-align:left;
width: 100%;
height:100px;
}
#media (max-width:800px) {
.card {
width:50%;
}
}
#media (max-width:400px) {
.card {
width:100%;
}
}
</style>
<head>
<meta charset="UTF-8">
</head>
<body style="margin:0px">
<h1>Best Football Players</h1>
<div class="card">
Messi
<div class="comment">Undoubtedly the best in the world and most likely of all times (Sorry, Ronaldo fans)</div>
</div>
</body>
</html>
Now you have the comment set to same height as the card, so it doesn't matter if you set top or bottom to 0.
Change .comment like this and it will align at the bottom.
bottom:0;
height: auto;
Sample snippet
.card {
position: relative;
/* Don’t change these */
float: left;
box-sizing: border-box;
/* Feel free to play around with these */
text-align: center;
border-style: double;
border-width: 3px;
background: #84a0d7;
line-height: 100px;
height: 100px;
/* Change the width to get a different layout */
width: 33.33%;
}
.comment {
font-size:9pt;
color:white;
font-family:Verdana;
line-height:normal;
position:absolute;
bottom:0;
text-align:left;
width: 100%;
height: auto;
}
#media (max-width:800px) {
.card {
width:50%;
}
}
#media (max-width:400px) {
.card {
width:100%;
}
}
<h1>Best Football Players</h1>
<div class="card">
Messi
<div class="comment">Undoubtedly the best in the world and most likely of all times (Sorry, Ronaldo fans)</div>
</div>
Related
I'm trying to get the "item" links inside the "menu" to stay inside the "navWrapper"/"navContent" when the browser is resized.....yet when I decrease the width of the browser window they keep staying off to the right outside these divs....any ideas on how to keep them all contained inside the nav area?
<div id="navWrapper">
<div id="navContent">
<div id="logo"><img src="assets/logo.png"></div>
<div id="menu">
<div class="item">dadada</div>
<div class="item">dadada</div>
</div>
</div>
#navWrapper {
background-color:#3f3f3f;
margin-left: 20px;
margin-right: 20px;
border-top-right-radius: 0px;
border-top-left-radius: 0px;
border-bottom-right-radius: 30px;
border-bottom-left-radius: 30px;
margin-top:0 auto;
}
#navContent {
width:950px;
height:65px;
}
#navContent #logo {
width:200px;
float:left;
display:inline;
margin-left:30px;
margin-top:15px;
}
#navContent #menu {
width:466px;
height:25px;
float:right;
display:inline;
border: 1px solid #ffffff;
margin-right:30px;
margin-top:15px;
}
Hopefully this is what you are looking for:
http://jsfiddle.net/disinfor/7XFsH/
HTML
<div id="navWrapper">
<div id="navContent">
<div id="logo">
<img src="assets/logo.png" />
</div>
<!-- #logo -->
<div id="menu">
<div class="item">dadada
</div>
<div class="item">dadada
</div>
</div>
<!-- #menu -->
</div>
<!-- #navContent -->
</div>
<!-- #navWrapper -->
CSS
#navWrapper {
background-color:#3f3f3f;
margin-left: 20px;
margin-right: 20px;
border-top-right-radius: 0px;
border-top-left-radius: 0px;
border-bottom-right-radius: 30px;
border-bottom-left-radius: 30px;
margin-top:0 auto;
}
#navContent {
width:100%;
height:65px;
}
#navContent #logo {
width:200px;
float:left;
display:inline;
margin-left:30px;
margin-top:15px;
}
#navContent #menu {
height:25px;
float:right;
display:inline;
border: 1px solid #ffffff;
margin-right:30px;
margin-top:15px;
}
.item {
float:left;
position:relative;
padding-left:10px;
}
.item a {
color:white;
}
It also makes the navContent responsive.
if you keep the menu with a fixed width that is going to happen always.
I suggest you to dig into mediaqueries so, depeding on the screen resolution, are the styles you might set.
Also you can try by setting the navContent like this:
#navContent {max-width:950px;} /* instead of width */
And remove the width in the #menu, is not required if is floated.
This way the nav is not going to be wider than its containers (be sure there are no containers with a fixed with).
I insist, if you want to be very accurate on the result, try by appliying mediaqueries.
Here some documentation and a cool tool to detect what resolution you are viewing [link]
This method is only recommended if your header does not have an expanding height (ie, if the navigation isn't supposed to wrap
Give the container a min/max width, but let it use "auto" as the actual width. The minimum will allow users on small screens/devices to scroll over and use your navigation, rather than letting it spill off screen and potentially out of the box. It still goes off-screen, but in an expected way. (tip: use an #media query to change the menu layout on those small screens)
#navWrapper {
width: auto;
max-width: 960px;
min-width: 560px;
}
Position the #navContent so that it is relative and does not have a width. This will let you position children elements relative to this div. Note that you must specify a height for this container as well, but you have already done that in your CSS
#navContent {
position: relative;
width: auto;
}
Now position the elements that should appear in the menu. Don't bother with margin or padding for the original elements. Use absolute positioning. Get it perfect.
The magic, you can attach this to the right of the menu.
#navContent #logo {
position: absolute;
top: 15px;
left: 30px;
/* Used to reset your CSS */
margin: 0;
}
#navContent #menu {
position: absolute;
top: 15px;
right: 30px;
/* Used to reset your CSS */
display: block;
float: none;
margin: 0;
}
For the navigation, I suggest the .item classes be inline, and the links be floated blocks. This means the "items" won't be much more than a wrapper, and the links can be given a background or borders without the strange "deadzone" between them. Padding on navigation links is great for usability & touch devices.
#navContent #menu .item {
display: inline;
}
#navContent #menu .item a {
display: block;
float: left;
/* padding, background, border... go nuts */
}
You don't need to clear the navigation in this case, since the #menu is positioned absolutely it won't affect other elements to begin with.
try this
html
<div id="navWrapper">
<div id="navContent">
<div id="logo"><img src="assets/doityourweb-logo.png"/></div></div>
<div id="menu">
<div class="item">dadada</div>
<div class="item">dadada</div>
</div>
</div>
css
#navWrapper {
background-color:#3f3f3f;
margin-left: 20px;
margin-right: 20px;
border-top-right-radius: 0px;
border-top-left-radius: 0px;
border-bottom-right-radius: 30px;
border-bottom-left-radius: 30px;
margin-top:0 auto;
}
#navContent {
width:950px;
height:65px;
}
#navContent #logo {
width:200px;
float:left;
display:inline;
margin-left:30px;
margin-top:15px;
}
#navContent #menu {
width:466px;
height:25px;
float:left;
padding-left:8%;
display:inline-block;
border: 1px solid #ffffff;
margin-right:50px;
margin-top:15px;
}
.item{
display:inline-block;
}
http://jsfiddle.net/U6B8x/
P.S i dont know where you want to close your #navContent so check and tell
I want to make a 1 px line from the left side of the screen to the end of a centered div.
The div is centered with margin: auto;.
This image shows how it should look:
Here's an example using calc:
.box{
width:200px;
height:200px;
border:1px solid blue;
margin:0 auto;
}
.line{
border: 1px solid red;
width: calc(((100% - 200px)/2) + 200px);
}
JSFiddle
Browser support
How about this solution? no extra markup needed, cross browser and does not depend on the width of the element
#content {
width:400px;
height: 200px;
margin:auto;
position: relative;
}
#content:before{
content: '';
height: 1px;
background: red;
position: absolute;
top: -5px;
right: 0;
width: 999%; /*a large number*/
}
Demo fiddle
here is another solution and it is cross browser http://jsfiddle.net/9qrSy/3
<div class="inner"></div>
<div class="wrapp"></div>
css
body {
padding:8px;
}
div.wrapp {
width:300px;
height:300px;
border:2px solid green;
margin:auto;
position:relative;
}
div.wrapp:before {
content:'';
position:absolute;
width:100%;
height:1px;
right:0;
top:-6px;
background:blue;
z-index:1;
}
.inner {
width:50%;
float:left;
position:absolute;
height:1px;
left:0;
top:12px;
background:blue;
}
I am not sure if this works in all browsers, but I believe hr takes up all the space you provide it with. Therefore you can give it a large negative left-margin and put it inside the centered div. Instead of a hr-element, you could use an empty div too, which might or might not be easier to use. You can set the border-top style of that div to a wider range of border-types (dotted for example).
<div id="content">
<hr id="bar" />
<div id="realcontent">
Something here
</div>
</div>
With CSS:
#content {
width: 400px;
margin: auto;
color: white;
}
#bar {
margin-left: -1000px;
margin-bottom: 5px;
background: blue;
}
#realcontent {
background-color: #000000;
}
I know it's been asked a few times, but upon playing around a bit I still couldn't center what I need to. What I'm looking to do it center those buttons vertically on the page. I want to put centered text above it, too.
My (sloppy) code: JsFiddle
HTML:
<div>
</div>
CSS:
div {
text-align: center;
}
a {
text-align: center;
margin: auto;
}
.cbtn {
display:inline-block;
width:60px;
height:60px;
border-radius:50px;
background:transparent;
border: solid gray 1px;
margin: 2px;
-o-transition:.5s;
-ms-transition:.5s;
-moz-transition:.5s;
-webkit-transition:.5s;
transition:.5s;
}
.cbtn:hover {
text-decoration:none;
background:#F3734F;
}
#mail {
background-image:url(http://data.novicode.com/data/img/mail.png);
background-position:50% 50%;
background-repeat:no-repeat;
}
Here is one way of doing it, assuming you want the buttons centered both horizontally and vertically on the page.
The HTML is:
<div class="wrap">
<div class="button-wrap">
</div>
</div>
and the CSS is:
html, body {
height: 100%;
width: 100%;
margin: 0;
padding: 0;
}
.wrap {
height: 100%;
width: 100%;
}
.button-wrap {
position: absolute;
left: 0;
right: 0;
top: 0;
bottom: 0;
height: 60px;
width: 350px;
margin: auto;
text-align: center;
}
You need to declare the width and height properties of the body and html elements to be 100%, and the same for div.wrap.
The trick is to wrap the links/buttons in div.button-wrap, which is absolutely positioned and given specific width and height values to match the buttons. The height of 60px is based on the height of the .cbtn, and the width of 350px is 5 times (60px + 2x2px + 2x1px + 4x1em) which is about 350px. However, since we can use text-align: center for centering the inline blocks, the exact width is not too critical, just make it wide enough.
The centering works by setting all the position values to 0 (left/right/top/bottom) and then setting margin: auto.
This is all based on CSS 2.1 so it should work in most browsers. The only limitation is the inline-block property, which IE7 does not recognize.
However, since you are using CSS2 animations, inline-block is probably okay.
Fiddle reference: http://jsfiddle.net/audetwebdesign/METYC/
Full page view: http://jsfiddle.net/audetwebdesign/METYC/show
check this :
http://jsfiddle.net/AT8S6/
you can change the width,height and margin property of section for different results .
HTML
<div>
<section>
</section>
</div>
CSS
div {
text-align: center;
height:400px;
width:100%;
border:2px #000 solid;
}
a {
text-align: center;
margin: auto;
}
div section {
width:65%;
height:50%;
margin:20% auto;
}
.cbtn {
display:block;
width:60px;
height:60px;
border-radius:50px;
background:transparent;
border: solid gray 1px;
margin: 2px;
-o-transition:.5s;
-ms-transition:.5s;
-moz-transition:.5s;
-webkit-transition:.5s;
transition:.5s;
float:left;
}
.cbtn:hover {
text-decoration:none;
background:#F3734F;
}
#mail {
background-image:url(http://data.novicode.com/data/img/mail.png);
background-position:50% 50%;
background-repeat:no-repeat;
}
You could set the following rules on the div:
div {
position: absolute;
left: 50%;
height: 50%;
margin-top: -(height of div);
margin-left: -(width of div);
}
Example link below:
http://jsfiddle.net/AT8S6/1/
I'm using a free wordpress theme from woothemes, Swatch theme. I don't know if somebody uses this theme,too. I've got involved some issue. When the posts is short. the theme's footer can't reach to the bottom. Left a piece of blank space. It's so ugly. So I wanna find a method to fix it. I've read some css books and googling for many times but I still can't find a way. So, I hope you guys can give me some suggetion. My programing knowledge is so poor. Sorry for that. Hope get your reply.
Best regards.
/* 2.1 Containers & Columns */
#wrapper { background: transparent url(images/wrapper-bg-colourstrip.png) repeat-x left top; padding-top: 5px; } /* Top padding is the height of the colour strip image. */
#main{width:575px;}
#main.fullwidth, .layout-full #main, .col-full {width: 900px; margin:0 auto;}
#sidebar{width:250px;}
#sidebar .secondary { width:140px; }
.entry img { max-width:565px; }
.layout-full .entry img { max-width:890px; }
.col-left { float: left; }
.col-right { float: right; }
.two-col-right #main { float:right; }
.two-col-right #sidebar { float:left; }
/* 2.6 Footer */
#footer{padding: 30px 0 20px; background: url(images/bg-ripple-footer.png) repeat top left; color:#999;}
#footer p {}
#footer a { color: #ffffff; }
#footer #credit img{vertical-align:middle;}
#footer #credit span{display:none;}
#footer-widgets { margin-bottom: -5px; background: url(images/bg-ripple-footer-widgets.png) repeat top left; padding:10px 0; }
#footer-widgets .block { padding:20px 10px 0 10px; float:left; }
#footer-widgets .col-1 .block { width:100%; padding-left:0; }
#footer-widgets .col-2 .block { width:420px; padding-left: 20px; }
#footer-widgets .col-3 .block { width:270px; padding-left: 16px; }
#footer-widgets .col-4 .block { width:200px; padding-left: 10px; }
This demo displays a widely used method of implementing a sticky footer http://ryanfait.com/sticky-footer.
The HTML setup:
<div class="wrapper">
<!-- Body Content -->
<div class="push"></div>
</div>
<div class="footer">
<!-- Footer Content -->
</div>
This is the CSS that does it:
html, body {
height: 100%;
}
.wrapper {
min-height: 100%;
height: auto !important;
height: 100%;
margin: 0 auto -142px; /* the bottom margin is the negative value of the footer's height */
}
.footer, .push {
height: 142px; /* .push must be the same height as .footer */
}
Failing that you could try asking WooThemes for support.
Here is my stylesheet code
#topwrapper {
background: url(images/orangebg.jpg) repeat-x top;
height: 502px;
}
#mainwrapper {
background:url(images/bluebg.jpg) repeat;
}
#maincontent {
margin: 0 auto;
width: 961px;
background-color:#F0EFEF;
position: relative;
margin-top: -312px;
}
I want the maincontent div to move up into the orange div but it is bringing the bluebg.jpg with it (cutting short the orangebg.jpg). When I tried using -top: 312px; instead of the negative margin it added space below the #maincontent.
The code on the page reads
<div id="topwrapper"></div>
<div id="mainwrapper"><div id="maincontent">test test</div></div>
View on jsfiddle
jsfiddle.net/bdh2a - remove the margin-top: -312px; and that is how I need the orange background to look with the grey box on top of it
maybe you can set margin-top: -312px; to mainwrapper div?
Re-arrange your html like this:
<div id="mainwrapper">
<div id="maincontent"><p>text text</p></div>
<div id="topwrapper"></div>
</div>
Then use this CSS setup (adjusting the heights and stuff of course):
#mainwrapper{
height:100%;
background-color:#FF4200;
width:100%;
}
#topwrapper {
background-color:#1B00FF;
height:100px;
min-width:100%;
margin:0 auto;
position:absolute;
top:0;
z-index:0;
}
#maincontent {
margin: 0 auto;
padding:20px;
top:20px;
background-color:#ccc;
position: relative;
color:#000;
z-index:1;
width:80%
}
Check out this jsfiddle:http://jsfiddle.net/imakeitpretty/yqnfk/
There is a lot of greek text in there because you can't see the orange expand without it. "text text" isn't enough to do it.
I Found a solution!!
#topwrapper {
background: url(images/orangebg.jpg) repeat-x top;
height: 502px;
}
#mainwrapper {
background:url(images/bluebg.jpg) repeat;
float: left;
width: 100%;
display: block;
position: relative;
}
#maincontent {
width: 961px;
background-color:#F0EFEF;
position: relative;
margin-top: -312px;
margin-left: -480px;
position: relative;
float: left;
left: 50%;
}
The code on the page stays the same