Given the markup
<div id="header">
Cattle Farms
</div>
And style
#header
{
width: 960px;
height: 200px;
margin-bottom: 20px;
}
#header a
{
width: 100%;
height: 100%;
display: block;
font-size: 25px;
}
How whould I go about placing/positioning/aligning the text "cattle farms" so that it sits 20px from the left and 20px from the bottom in such a manner that it does not break the a out of the div visually even when looking it with Firebug.
You could simply add a <span> to the anchor and add some padding to that. Like this:
<div id="header">
<span>Cattle Farms</span>
</div>
And add these additional styles:
#header a span {
padding-left: 20px;
padding-bottom: 20px;
}
EDIT:
Also, add overflow: hidden to the header.
#header {
overflow: hidden;
}
You need to specify position: relative on the parent container:
CSS:
#header {
position: relative;
width: 960px;
height: 200px;
}
#header a {
position: absolute;
bottom: 20px;
left: 20px;
}
I would recommend taking away the 100% width and height. By doing this, you'll be able to place it within the header. If you don't, you're expanded to the size of the header, so there's no room to change your placement.
Since it's a block element, you can do this a few ways.
You can either use margin to "push" it away from other elements (if you decide to add more on top of it). Or you can you use "position: relative" and "top" or "left". I would recommend using this with a %. I tried this code and it achieved the effect you were looking for I think:
#header{
width: 960px;
height: 200px;
}
#header a {
display: block;
position: relative;
top: 95%;
}
Well. I have no idea why this works. But it does
div#header a
{
width: 100%;
height: 100%;
display: block;
text-indent: 20px;
line-height: 350px;
}
Related
As you can see on the picture below, my submit button ("envoyer" in french) is placed outside its container (the container has a red background and is called .footer-content)
I haven't been able to recreate the issue on jsfiddle so here is the direct link (I haven't been able to identify the issue using firebug)
.footer-content {
position: relative;
margin-right: auto;
margin-left: auto;
height: auto;
clear: both;
z-index: 9;
max-width: 700px;
background: red;
margin-top: 40px;
}
Because your formulars position is absolute and its containers height is auto (absolute positioned elements don´t influence their parents height)
Use this CSS for your formular
#contactfrm {
position: relative;
float: left;
}
Try this:
.footer-content {
margin: 40px auto auto auto;
width: 100%;
max-width: 700px;
height: auto;
background: red;
position: relative;
clear: both;
z-index: 9;
overflow: auto;
}
I'm looking for a CSS-only solution, to create a fixed header on a div, where the scrollbar for the content starts next to (and not below of) the header. To get an idea on how it should look, have a look at this fiddle:
http://jsfiddle.net/V4uL6/
Here, I tried to take the following approach:
HTML
<div class="outer">
<div class="top">Title</div>
<div class="body">
<div class="content">
.... Text Content here ...
</div>
</div>
</div>
CSS
.outer {
position: absolute;
top: 20px;
left: 20px;
width: 200px;
height: 300px;
}
.top {
z-index: 2;
position: absolute;
height: 30px;
width: 100%;
}
.body {
z-index: 3;
position: relative;
width: 100%;
height: 100%;
overflow: auto;
}
.content {
margin-top: 30px;
}
The problem with this approach is, that the content lies on top of the header (you'll see it as soon as you start scrolling). It however feels like, it is really close to a solution. But since I haven't found anything on the web, I fear that this is only doable with JavaScript. So is that true or is there a CSS-only solution for this problem?
Set z-index on body to 1, or any number lower than the z-index on top.
EDIT: You still have the issue of the scrollbar being hidden, but since you said you wanted the scrollbar next to, and not under the header, you can change that by adjusting the width on the content classes.
I found a solution! The trick is to apply z-index: -1 to the content element and remove the z-index from all other elements:
.outer {
position: absolute;
top: 20px;
left: 20px;
width: 200px;
height: 300px;
}
.top {
position: absolute;
height: 30px;
width: 100%;
}
.body {
position: relative;
width: 100%;
height: 100%;
overflow: auto;
}
.content {
position: relative;
z-index: -1;
margin-top: 30px;
}
Here is the updated fiddle: http://jsfiddle.net/V4uL6/3/
I'm trying to set up an anchor that would automatically stretch to match the dimensions of an image that is used as a background. Also, the anchor's text needs to be both horizontally and vertically centered. Here's my current HTML markup:
<div class="wrap">
<img src="http://placehold.it/350x150">
<a href="#">
<span>Anchor</span>
</a>
</div>
The idea is that my .wrap is a fluid column of a grid, so the image stretches to match the width and height is given by the image's ratio. The anchor is displayed as a table for vertical alignmenet and the span has a background visible on hover over the anchor. There is my CSS:
* {
box-sizing: border-box;
}
body {
height: 100%;
}
.wrap {
height: auto;
margin: 2em;
overflow: hidden;
padding: 1em;
position: relative;
width: 80%;
}
.wrap img {
width: 100%;
}
.wrap a {
display: table;
height: 100%;
left: 1em;
padding: 1em;
position: absolute;
text-align: center;
top: 1em;
width: 100%;
}
.wrap a span {
border: 1px solid red;
display: table-cell;
vertical-align: middle;
}
.wrap a:hover span {
background: red;
}
The problem I have is the height of the anchor, it refuses to fill the container. Here you have a fiddle: http://jsfiddle.net/xuxG5/3/
I tried looking into other questions around here but unfortunately none of them matched my problem - it's a combination of 100% height table in a fluid parent height but the most common answer was to set height of the parent and the absolute position doesn't make it any simpler.
Question edited to show the anchor's text doesn't always have just one line of text
I was hoping you could help me if there is a CSS solution, otherwise I will use a simple JS script.
This should make the A fill the box - http://jsfiddle.net/xuxG5/5/
.wrap a {
display: block;
left: 2em;
right: 2em;
bottom: 2em;
top: 2em;
position: absolute;
text-align: center;
border: 1px solid red;
}
.wrap a span {
position: absolute;
top: 50%;
margin-top: -1em;
line-height: 2em;
width: 100%;
display: block;
}
I've got the following piece of CSS in which i want the navigation and the website to be absolutely positioned so i can slide them back and forth when the menu button i pressed(Like the facebook app for example). To do so i've got a container with an overflow: hidden(To hide the nav bar and slide it in when needed). However; the container loses it's autoheight because of the absolute positioning within i'm afraid.
How can i get the height to be set automatically again as overflow: hidden does without absolute positioning in it.
i've created a fiddle in which the container has a height of 500px. I want to make the height scale automatically though. http://jsfiddle.net/rB7EY/
div {
box-sizing: border-box;
}
.container {
overflow: hidden;
width: 100%;
max-width: 60em;
padding: 0;
margin: 0 auto;
position: relative;
background: grey;
height: 500px;
}
/*CSS for the navigation bar that can be toggled*/
.navigation {
width: 15em;
float: left;
background: blue;
position: absolute;
left: -20px;
}
/*The CSS for the actual content*/
.website {
width: 100%;
float: left;
position: absolute;
left: 0px;
}
.container .website .top_bar {
height: 4em;
background: pink;
padding: 1em;
position: relative;
}
.container .website .top_bar .menu_button {
width: 3.2em;
height: 2.5em;
background: red;
border: 0px;
}
nav.menu {
width: 15em;
position: absolute;
left: 1em;
top: 3em;
background: yellow;
}
If I understand you well, enough you want to scale the container automaticly? Try using a min-height and a max-height
I fixed it by using a div between the container and the navigation and website and gave that a absolute position. With that i've decided to make the container be min-width: 100%
I am trying to achieve following with my code: I would like to have a div container, div#title-box, that is centered. Inside that div container I want to have 3 other div containers, div#logo, div#title, div#subtitle (look at the code to see how exactly they are displayed)
Now the actual problem: The div#logo has a given width, the other two however don't, they float.
How can I have have the div#title-box wrap around the other three divs but at the same time staying centered. Another problem I see is that the div#title-box cannot have a fixed width.
Any ideas. Thanks!
EDIT: The code below has to be modified so that the div#title-box wraps around the other divs and stays centered.
If anyone needs to play around with the code, here is it with a full example:
<!DOCTYPE html>
<html>
<head>
<style>
div#title-box {
max-width: 500px;
display: block;
height: 600px;
margin: 0 auto;
position: relative;
}
div#logo {
padding: 0;
margin: 0;
position: absolute;
top: 100px;
left: 5px;
width: 100px;
height: 100px;
overflow: auto;
background: #ff0000 no-repeat;
background-size: 100% 100%;
border-radius: 15px;
float: left;
}
div#title {
padding: 0;
margin: 0;
position: absolute;
left: 110px;
top: 100px;
bottom: 20px;
right: 10px;
overflow: auto;
float: left;
}
div#subtitle {
padding: 0;
margin: 0;
position: absolute;
top: 140px;
bottom: 20px;
right: 10px;
left: 110px;
overflow: auto;
float: left;
}
</style>
</head>
<body>
<div id="title-box">
<div id="logo">
</div>
<div id="title">
<h1>Hello</h1>
</div>
<div id="subtitle">
<h3>A A A A A A A A A A A A A A A!</h3>
</div>
</div>
try something along the lines of
div#title-box {
width: 500px;
display: inline-block;
height: 600px;
margin: 0 25%;
position: relative;
left:-250px;
}
When you apply
position: absolute
to your code, it will be put out of the rest of the DOM-context.
I have modified your CSS as such: http://jsfiddle.net/asBmS/. Your wrapping div now should always contain the child divs. Is this what you wanted?
The best thing I can think to suggest is more of a 'hack' which would need to be adjusted if you change the width of the content.
Take a look at this link and see the offset margin-left, it puts everything in the center.
You'll probably need to tweak it further to meet your needs.
http://jsfiddle.net/asBmS/15/
#logo,#title,#subtitle{
/*offset hack*/
margin-left: 10% !important;
}