I've already asked this question, but in the wrong way. I should have told you guys what I wanted, and not how to fix my way of getting to it...
Basically I want a dynamic, fixed-height (150px) header that consists of an image (PNG with alpha channel) and a box on either side that stretch to the edge of the screen. The whole thing needs to be 50% transparent too.
I've tried this with divs to create the stretching boxes, having them and the image in a parent div, but never got them to adjust their width to reach the edge of the screen.
Here's a diagram:
[---div---][---image---][---div---]
Anyone got any ideas?
#header
{
position: absolute;
top: 0px;
left: 0px;
height: 150px;
width: 100%;
opacity: 0.5;
background-color: gray;
display: table;
}
#l
{
background-color: red;
}
#r
{
background-color: blue;
}
.headDiv
{
height: 100%;
width: 50%;
vertical-align: middle;
display: table-cell;
}
<head>
<div id="header">
<div class="headDiv" id="l"></div>
<img src="https://upload.wikimedia.org/wikipedia/en/thumb/9/9e/Flag_of_Japan.svg/1280px-Flag_of_Japan.svg.png" width=auto height=150px style="display:block">
<div class="headDiv" id="r"></div>
</div>
</head>
<body style="background-color:green; margin-top:160px;">
Things in the body go here.
</body>
This is the working bar, with color-coded divs and a Japanese flag to represent the center. All credit goes to Marc Audet for his great display: table strategy for filling space.
Related
I currently have two divs that I'm trying to use to emulate a drop down tabbed window.
I have content where the grayed out areas are. The bigger div (the div containing the big gray area or the "window") has a position of absolute, but so does the little div (the tab). I can't figure out how to move the tab so that I can add more tabs. When I do add more tabs, they just sit over the middle tab. I've looked at all the styling in the Elements dev tools, but there aren't other properties that can "shift" the tab left or right. How can I move it over to the left by, say, 200 px?
It is hard to help you without knowing more about your situation and seeing the code. But I made a couple illustrations to try and help you.
Example one.
This is how I would do it without position absolute. This way will keep the content area up top but will stack the tabs from left to right as you add more,
html
<div id="content">
</div>
<div id="tab1" class="tab">
</div>
<div id="tab2" class="tab">
</div>
<div id="tab3" class="tab">
</div>
css
#content {
background-color: gray;
width: 100%;
height: 200px;
}
.tab {
width: 100px;
background-color: gray;
height: 50px;
display: inline-block;
}
Output
This way is using position absolute and here is a jsfiddle.
Once an element has position absolute it can be moved around with directional rules. It starts in the top left corner. To move it now you can add a direction with an amount.
#myElement: {
position: absolute;
top: 20px;
right: 50px;
bottom: 20px;
left: 10px;
}
You can play with these values and watch the element move around the window.
Same html as example 1.
CSS
#content {
background-color: gray;
width: 100%;
height: 200px;
}
.tab {
width: 100px;
background-color: gray;
height: 50px;
display: inline-block;
}
#tab1 {
position: absolute;
left: 8px;
}
#tab2 {
position: absolute;
left: 300px;
}
#tab3 {
position: absolute;
left: 631px;
}
If this does not help you please add your code so I can better understand what you are trying to accomplish. From your question it sounds like you are having trouble using position asbsolute and creating tabs side by side of eachoter under the content. If so I have provided two examples.
1. using position absolute.
2. using display: inline-block.
I have to create a page with this structure:
Where the RED part has width = 100% and BLUE (and GREEN) part has width 885px.
I thought to create different width, some with width = 885px and the others with width 980px... but I think this is not the right approach... in fact if I have to change the width for example from 885px to 980 px
Another solution I think could be to have to div... the first one has width 100%; the second one, inside the first one, has width 885px. But I think could be difficult to place the green div at the same height/top of the red one on the back.
Which approach would you used to reach the goal?
Thank you
You need to manage simple html like below:
<div class="wrapper">
<div class="wrap"></div>
</div>
.wrapper{
width: 100%;
}
.wrap{
width: 885px;
margin: 0 auto;
}
When you only need full width div don't include .wrap in your html. And when you only need 885px width div exclude .wrapper in your html.
I made a quick example of how you could do this right here. I just made two classes, one that has a width of 100% (red div), and one that has a fixed width (blue div, I used 450px in my example). The green div is just a blue div inside a red div. I hope my example answers all the questions you have. Good luck!
I guess you can manage the red with green band and sencond red band positioning absolutely in a main container, that also contains the blue one with a width. To explain it better i've created a JsFiddle please follow the link to see it working:
Working example
I've use the approach suggested #C-link Nepal, but I think to put red bars this isn't enough.
HTML:
<div class="top"></div>
<div class="main">
<div class="redgreen">
<div class="green"></div>
</div>
<div class="red"></div>
<div class="blue"></div>
</div>
<div class="foot">
</div>
CSS:
.top {
background-color: red;
height: 50px;
}
.main {
text-align: center;
position: relative;
}
.green, .blue {
width: 600px;
margin: 0 auto;
}
.redgreen {
width: 100%;
background-color: red;
position: absolute;
top: 30px;
}
.red {
height: 30px;
position: absolute;
top: 150px;
background-color: red;
width: 100%;
}
.green {
background-color: green;
height: 100px;
}
Please note that most of CSS classes have height and background color to the pattern be drawn...
I have looked around a lot but cannot find a tutorial or suggestion for how to place an image in both the vertical and horizontal center of a page of two-column text. I've seen explanations for straddling an image across two columns, but aligned at the top of the text. I want to align an image in the middle middle.!
Is this even possible? I would prefer to do it in CSS, but will consider anything that works, (especially if it comes with some instruction.)
Thanks for any help you can offer (even if it's to tell me to give up.) (c;
I've found the technique described here and shown below to be very effective:
HTML
<div class="container">
<div class="inner">
<img src="//placehold.it/200x200">
</div>
</div>
CSS
.container {
text-align: center;
}
.container:before {
content: '';
display: inline-block;
height: 100%;
vertical-align: middle;
}
.inner {
display: inline-block;
vertical-align: middle;
}
I don't know if this is what you looking for.
1) Create two div (as column) and put image at the middle(Image will overlapped the both column.)
DEMO
img
{
background: red;
height: 300px;
width:400px;
margin: auto;
position: absolute;
top: 0;
right: 0;
left: 0;
bottom: 0;
}
2) Create 2 div(as column) with opacity:0.5 and put image at the middle (The image will acts like background since z-index is added)
DEMO
img
{
z-index:-1;
}
Good Luck!!
I'm trying to center an element of a precise size on a background that is built specifically for it, in order to make it appear seamless.
In the following code, #window represents the browser's window size in pixels (change it to anything). #background obviously refers to the background image I'll be using, and #positionMe is the object I want to fit on the background. I want the background to always be centered in the browser even if the window is resized, and I want the kitten to always be centered in the black box on the background.
As you can see below, the problem is that the background isn't centered on the viewport to begin with; it's centered based on total width of the browser. And when you resize the screen, it doesn't adjust accordingly.
HTML:
<div id="window">
<div id="background">
<img id="positionMe" src="http://cs421018.vk.me/v421018778/74bc/NearuIJQIck.jpg" />
</div>
</div>
CSS:
#window {
background-color: red;
width: 1280px;
height: 720px;
}
#background {
background: url('http://i.imgur.com/xzDclz5.jpg') no-repeat;
width: 500px;
height: 500px;
margin: 0 auto;
}
#positionMe {
position: relative;
top: 174px;
left: 154px;
}
This Fiddle demonstrates my issue.
Using a combination of display:table-cell and vertical-align:center will center your image vertically. In addition, you can simply use text-align:center to center your image horizontally.
http://jsfiddle.net/reinmcha/XtQ37/10/
Might need to do a little adjusting to keep the background div centered. So, we add another div and set to display:table. The "table cell" will fill the whole thing. Now we center the table with margin: 0 auto.
Final Product:
http://jsfiddle.net/reinmcha/XtQ37/20/
Might need to do some updating to get the image to center perfectly with the border (since it has width...)
Here's my go at it.
I hope you are aware there are tons of articles on this topic. Search around. You'll find your answer :)
You basically have two options, one would be using a div to display an image and making the image a centered background like so:
<div id="window">
<div id="background">
<div id="centerMe"></div>
</div>
</div>
with css:
#centerMe {
width: 100%;
height: 100%;
background: url('http://cs421018.vk.me/v421018778/74bc/NearuIJQIck.jpg') no-repeat center;
}
or for a pure css solution:
#background {
background: url('http://i.imgur.com/xzDclz5.jpg') no-repeat;
width: 500px;
height: 500px;
margin: 0 auto;
text-align: center;
}
#background:before {
content: "";
display: inline-block;
height: 100%;
vertical-align: middle;
}
#centerMe {
vertical-align: middle;
}
Hi I am trying to create a responsive layout where I have three different size elements and I want an equal margin on both sides of middle element for all screens.
Here is my HTML and CSS
<section class="container">
<div href="/" class="pull-left logo"><img src="/images/logo.jpg"></a>
<div class="slogan pull-left"><img src="/images/slogan.jpg"></div>
<div class="pull-left support"></div>
</section>
<style>
.pull-left
{
float-left;
}
.slogan
{
margin: 0 17%;
}
</style>
Since logo and support sections are of fixed size. Above Css works fine for one resolution but as screen size goes down the margin doesn't remain same.
Any ideas how to achieve that?
EDIT: Here is the fiddle. http://jsfiddle.net/VdYua/22/
Initially there is an equal margin on both side of .slogan div. But on re size last div goes to next line. I want the margin to be decreased without braking layout.
Are you looking for something like this?
HTML:
<div class="centered">This is some content in the centered DIV</div>
CSS:
.centered { background: #888; margin: 0 auto; width: 50%; }
Using margin: 0 auto will center the elements horizontally, meaning that it will have "Equal margin on both sides"
You do have to set a width on elements when using the above method, but as shown you can use percentage widths (as I image you may well be for a responsive layout)
You cannot however use this technique on floated elements, so you may be looking to add something like this to your CSS:
.container { margin: 0 auto; width: 50%; }
If I have misunderstood your question please let me know.
EDIT: In response to the comment below I think I have managed to achieve what you're looking for, see this fiddle
HTML:
<section class="header">
<div href="/" class="logo"><img src="/images/logo.jpg" /></div>
<div class="slogan"><img src="/images/slogan.jpg" /></div>
<div class="support"></div>
</section>
CSS:
.header { padding: 0 50px 0 300px; position: relative; }
.logo, .support { background: red; height: 50px; position: absolute; top: 0; }
.support { background: blue; right: 0; width: 50px; }
.logo { left: 0; width: 300px; }
.slogan { background: black; height: 50px; margin: 0 auto; width: 50px; }
The positioning/padding aspect of things isn't particularly pretty (if the width of .support or .logo change, you have to change that in the css) however I think this is the only safe way of doing it with pure HTML/CSS in a cross browser way (I'd be interested to see anyone elses take on it though), the important this is that it works and is completely valid.