I have something like this:
<section>
<h3>Header:</h3>
<p>My text which could span over several lines.</p>
</section>
section
{
background: #5E5E5E;
overflow:hidden;
}
h3
{
background: #B31B1B;
padding: 13px;
width: 174px;
float:left;
}
p
{
margin: 13px 13px 13px 213px;
}
I want the header background to extent to the bottom of the section but when the text in the <p> tag is more than a line it doesn't.
What can I do apart from using the faux columns technique?
You could absolutely position the <h3> instead of floating it. Something like this:
section {
background: #5E5E5E;
position: relative;
overflow: hidden;
}
h3 {
background: #B31B1B;
padding: 13px;
width: 174px;
position: absolute;
top: 0;
left: 0;
bottom: 0;
}
p {
margin: 13px 13px 13px 213px;
}
Live example: http://jsfiddle.net/ambiguous/cZ3rh/
Absolutely positioning the <h3> can cause trouble if the <h3> ends up being taller than the <p> as absolutely positioned elements do not contribute to their parent's height:
http://jsfiddle.net/ambiguous/NQB4n/
I can't think of a decent solution for this case right now though.
Can you apply the background to the section instead of h3?
An alternative could be to move the background to the SECTION and P tags.
section {
background: #B31B1B;
overflow:hidden;
padding: 0;
}
h3 {
padding: 13px;
width: 174px;
float:left;
}
p {
margin: 0;
background: #5E5E5E;
padding: 13px;
margin-left: 213px;
}
http://jsfiddle.net/pEfGq/
give a try to min-height = 100% in h3!
just set height of the h3 element to 100%.
h3
{
background: #B31B1B;
padding: 13px;
width: 174px;
float:left;
height: 100%;
}
Related
We are writing a custom website, but we want it to look similar to Wordpress, so we have written the code with the 'sticky' left position bar, and the scrolling right one.
But when you bring the page inward, the right columns wraps under the left one. Any ideas why and how to resolve?
Here is the CSS code:
html, body, section, article, aside {
min-height: 100%;
}
.sidemenu
{
position: sticky;
top: 0;
height: 100vh;
background-color: #333333;
color: #ffffff;
width: 160px;
float: left;
}
.menu-link a
{
padding: 8px 2px 2px 8px;
display: block;
color: #ffffff;
text-transform: capitalize;
}
.pagebody
{
float: left;
max-width: 95%;
text-align: left;
padding: 20px;
}
So you have two DIVs, left is 'sidemenu' right is 'pagebody'.
Hope you can help.
To fix the position of the sidebar, you need to used position: fixed;. After that, wrap the sidebar div and body div into one container and set its width to 100% (I also gave the body a margin of 0 at this point to remove gaps).
Give the body div a left-margin equal to the width of the sidebar, then set the width of the body using a calculation (as shown below). I also gave it a really long height to demonstrate scrolling.
You can omit your floats.
Here is the adjusted code:
html,
body,
section,
article,
aside {
min-height: 100%;
margin: 0;
}
.main {
width: 100%;
}
.sidemenu {
position: fixed;
top: 0;
height: 100vh;
background-color: #333333;
color: #ffffff;
width: 160px;
}
.menu-link a {
padding: 8px 2px 2px 8px;
display: block;
color: #ffffff;
text-transform: capitalize;
}
.pagebody {
width: calc(100% - 199.75px);
text-align: left;
padding: 20px;
height: 300vh; /**** used to demonstrate scrolling ****/
margin-left: 160px;
background-color: #BBB;
}
<div class="main">
<div class="sidemenu">
Side Menu
</div>
<div class="pagebody">
body
</div>
</div>
I want an image to be displayed behind some text in an <h1> tag. But when I add the image it replaces the text and pushes the text below it.
Screenshots : Before and After
CSS
body {
background-color: #1a1a1a;
}
header,
h1 {
text-align: center;
font-family: CGF Locust Resistance;
font-size: 50px;
color: lightgray;
-webkit-text-stroke: 1.5px #000;
}
header {
margin: 0;
padding: 0;
height: 100px;
border-bottom: .5px solid #b3b3b3;
}
nav {
position: relative;
top: -5px;
margin: auto;
padding: 0;
list-style: none;
width: 100%;
text-align: center;
border-bottom: .5px solid #b3b3b3;
}
nav ul li {
display: inline;
color: #fff;
font-family: CGF Locust Resistance;
font-size: 12.5px;
padding: 20px;
}
.red {
color: red;
}
#omen {
z-index: -1;
}
Set the image as a background-image of header. Is that what you're after?
h1 {
background: url(the/filepath/to/your/image.jpg) no-repeat center 100px;
background-size: 400px auto;
}
That's approximately how you would use a background image in this situation. center 100px means horizontally centered and 100px from the top (in relation to the h1 element).
h1 {
position : abosolute;
}
This should do the trick but it is preferable to use ids instead of changeing the h tags everywhere on your side
Put this parameter to the image object in css (example creating custom classes) :
.image{
position: relative;
}
And this one to the text :
.text{
position: absolute;
}
Of course, you have to set this classes to it's respective objects. Hope it helps !
I can't seem to center my div tag within a section tag. I can get it centered from left to right but not top and bottom in the center of the section tag. If I give a margin-top:xxpx then it moves the section tag down and exposes it (not good!)
Here is my css
body
{
background-color: yellow;
margin: 0;
}
header > * {
margin: 0;
float: left;
}
header
{
background-color: white ;
width: 100%;
height: 40px;
}
/*header > input {
margin: 10px 20px 0px 10px;
}*/
#toptext
{
margin: 10px 5px 0px 10px;
width: 245px;
}
article > * {
margin: 0;
}
article
{
background-color: red;
}
#search {
background-color: #a6dbed;
height: 500px;
}
#middlesearch {
background-color: grey;
width: 700px;
margin: 0 auto;
}
#mostdesired
{
background-color: #c7d1d6;
height: 200px;
}
section h2 {
margin:0;
}
.site-title {
color: #c8c8c8;
font-family: Rockwell, Consolas, "Courier New", Courier, monospace;
font-size: 1.3em;
margin: 0px 20px 0px 50px;
margin-top: 7px;
}
.site-title a, .site-title a:hover, .site-title a:active {
background: none;
color: #c8c8c8;
outline: none;
text-decoration: none;
}
Here is my html
<body>
<header>
<p class="site-title">#Html.ActionLink("Site", "Index", "Home")</p>
<input id="toptext" type="text" />
</header>
<article>
<section id="search">
<div id="middlesearch">
<h2>Search Here</h2>#RenderBody()
</div>
</section>
<section id="mostdesired" ><h2>This is the most section</h2></section>
</article>
</body>
Vertically aligning with CSS is notoriously tricky.
Change the CSS to
#search {
position: relative;
background-color: #a6dbed;
height: 500px;
}
#middlesearch {
position: absolute;
background-color: grey;
width: 700px;
top: 50%;
left: 50%;
margin-left: -350px; /* half the width */
}
and add one line of JQuery to up the div to be correctly centered
$('#middlesearch').css("margin-top",-$('#middlesearch').height()/2)
this line can be avoided if you decide to explicitly specify the height of the div at which point you can simply define the top margin in the CSS.
This avoids having to use tables.
The CSS declaration for header isn't closed on line 20
http://www.vanseodesign.com/css/vertical-centering/
Unfortunately, CSS doesn't make it to easy, but it is possible. Since the div height is dynamic, I would recommend the CSS table method. Yes, a total hack, but it does work.
You have to do a little work for block level elements, refer to these examples
http://phrogz.net/CSS/vertical-align/
http://www.vanseodesign.com/css/vertical-centering/
#middlesearch {
display:inline-block;
line-height:500px;
vertical-align:middle;
}
I'm working a friend's site: http://www.lauraradniecki.com and I'm trying to get the newsletter bar to stay aligned with the body text, even when the browser is resizing. This works fine, if you're scaling down in size, but if you go up, the size between the text and the subscribe box starts to move away from each other. I can't figure out how to get this fixed
#inside {
margin-left: 11%;
max-width: 530px;
font-size: 100%;
float: left;
}
#insideright {
float: right;
margin-right: 12%;
}
#insideright .formsubmit {
margin: -1px 3px 1px 16px;
}
#subscribe {
background-color: #7EBFC5;
color: #fff;
padding: 30px 30px 40px;
height: 100% !important;
overflow: hidden;
}
Sorry if that's confusing- it's my first time posting here.
I would put the newsletter bar text in a container that is the same size as the body text container. Then set the left and right margins just the same as the body text containers.
Essentially you would make a smaller version of the main content container inside itself.
Assuming from your explanation and code the inside styles should be IN the subscribe id...
#inside {
margin-left: 11%;
max-width: 530px;
font-size: 100%;
left: 0px;
position: absolute;
}
#insideright {
right: 0px;
margin-right: 12%;
position: absolute;
}
#insideright .formsubmit {
background: #ccc;
position: absolute;
right: 0px;
}
#subscribe {
background-color: #7EBFC5;
color: #fff;
padding: 30px 30px 40px;
height: 100% !important;
overflow: hidden;
}
What I am trying to do is, placing the two div blocks, CV and Contact at the bottom of the page, and when hovered over it, they would cover the whole page like they do at this state. I tried to move them with margin-top property, but they didn't behave proper when i hovered on them. Also, I want no scroll bars that is whatever user's screen size is, the boxes always appear in corner of page. Is my solution is valid for this, or do i need some javascript to do these? Here is my jsfiddle:
http://jsfiddle.net/cR9NL/
what positions should I use in this situation: absolute or relative?
html code is still the same, below is my css for you and demo:
CSS
html, body { height: 100%; max-width: 100%; margin: 0; padding: 0; }
#container {
position: relative;
height: 100%;
width: 100%;
overflow: hidden;
}
#container div {
height: 25%;
width: 15%;
text-align: center;
}
#container>div:hover {
height: 100%;
width: 100%;
text-align: center;
position: absolute;
z-index: 5;
}
#upper-left{
background: #77cc00;
float: left;
border: solid 3px #99ee22;
}
#upper-right{
background: #ffdd22;
float: right;
border: solid 3px #ffff44;
}
#lower-right {
position: absolute;
bottom:0;
right: 0;
background: #55bbff;
border: solid 3px #77ddff;
}
#lower-left{
position: absolute;
bottom: 0;
left: 0;
background: #ff5522;
border: solid 3px #ff7744;
}
#container>div>p {
font-family: Tahoma;
margin: 28% auto;
font-weight: 900;
color: white;
font-size: 30px;
}
DEMO
http://jsfiddle.net/bartekbielawa/cR9NL/2/
Make the lower-left and lower-right divs positioned absolute, with 0 for the bottom value and 0 for the left and right values, respectively.
Fiddle :) :
position:absolute;
bottom:0;
right:0;
http://jsfiddle.net/cR9NL/1/