Im wanting to align 3 divs together, but i want the left div to stretch 100% left, the right 100% right with the middle div having a fixed width.
Basically I'm trying to create a header for my website with the logo in the middle and the background seemingly stretching out forever but the logo has transparency so I can't just overlay one ontop of the other.
I have done this using tabels at the moment like below but wondered if there was a better (css) way of doing it?
The Real issue being that the background of the logo in the center of the banner needs to be transparent so i cant have any overlapping divs?
Here is my example done using the following method but would prefer to use CSS if possible?
LINK: example
<table border="0" cellpadding="0" cellspacing="0">
<tr>
<th scope="col" style="width:50%; height:123px; background-image:url(style/images/header_bckdrp.png); background-repeat:repeat-x"></th>
<th scope="col"><img src="style/images/header_logo.png" width="122" height="123" alt="Header_logo"></th>
<th scope="col" style="width:50%; height:123px; background-image:url(style/images/header_bckdrp.png); background-repeat:repeat-x"></th>
</tr>
</table>
I don't know if this method will work for what you are trying to achieve, but you can horizontaly center the image and then apply a background color, so it will cover the background image. You shouldn't be using empty elements, they are semantically incorrect. It's up to you though.
Take a look at this codepen.
This should work for you:
<style type="text/css>
#left, #right{
position:absolute;
top:0px;
width:50%;
height:50px;
}
#left, #headerpattern_left, #rightsticky{
left:0px;
}
#right, #headerpattern_right, #leftsticky,{
right:0px;
}
#headerpattern_left, #headerpattern_right{
position:absolute;
background:url(pattern.png) repeat-x;
width:45%;
}
#leftsticky, #rightsticky{
position:absolute;
}
#logo{
position:relative;
width:50px;
height:50px;
margin:0px auto;
}
</style>
<body>
<div>
<div id="left">
<div id="headerpattern_left">
</div>
<div id="leftsticky>
<img src="correctly_measured_image_of_pattern_on_left_side_of_logo.jpeg" />
</div>
</div>
<div id="right">
<div id="headerpattern_right">
</div>
<div id="rightsticky>
<img src="correctly_measured_image_of_pattern_on_right_side_of_logo.jpeg" />
</div>
</div>
<div id="logo">
</div>
</div>
</body>
EDIT: new suggestion
Off the top of my head, you could create two divs within each of the left and right divs and create a jpeg of how the pattern should look 100px either side of the logo and have them stick right next to the logo, then use the same repeating background on the divs next to the jpegs.
This should work in most cases, but in a few instances it will not look perfect, such as if the webpage is viewed on a gigantic screen or zoomed out quite far. Also, I'm not sure how it will look on mobile devices.
Related
Not sure if this is possible, but I have a div with a "border" background. Inside this div is another div that holds the content, and I want this div to appear under the border.
Is this possible to do with CSS?
Edit: Sorry for writing it in a hurry, let me try to explain more.
The parent div uses background-image like so:
background-image: url(images/SomeImage.png)
SomeImage.png is just a custom border that appears at the top of the div.
I have a child div inside this parent div, and I want it to appear beneath SomeImage.png. Is this possible?
Do something like this:
HTML
<div id="border-bg">
<div id="content">
Your content goes here
</div>
</div>
CSS
#border-bg {
background:url(images/border.png) no-repeat;
z-index:100;
position:relative;
}
#border {
z-index:10;
position:relative;
}
Make sure to add the width and height of border image.
The z-index property specifies the stack order of an element. An element with greater stack order is always in front of an element with a lower stack order.
Check this for more info about z-index
it is possiple. try changing the opacity of the parent div.
for example
$("#childdiv").css({ opacity: 1.0 });
$("#parentdiv").css({ opacity: 0.75 });
I think you want to apply inner shadow http://sublimeorange.com/css/css3-inner-shadow/ on the content div?
<div id="border-frame" style="padding: 10px; background-color: red">
<div id="content" style="padding: 10px; box-shadow:inset 0 0 10px #000000; background-color:white">
this is some great text
</div>
</div>
http://jsfiddle.net/gzbVG/
I ended up putting the "background image" in another div and using negative margins. Sorry for the confusion but none of the other solutions worked for me.
Just throwing this out there...
I'm using this to put a background image behind a login screen...
<table align=center width=100% border=0 cellpadding=0 cellspacing=0 background="images/image.png" STYLE="background-repeat: no-repeat; background-position:center">
<tr>
<td align=center valign=middle height="350" background="images/loginimage.png" STYLE="background-repeat: no-repeat; background-position:center">
Content Here
</td>
</tr>
</table>
So here is the the thing.
I have footer div.
I wanted to create a nice background to it.
There will be an image in the center.
Background will extend to infinity to left with X bg pattern
Background will extend to infinity to right with Y bg pattern
Like this;
XXXXXXXXXXXXXXimageYYYYYYYYYYYYY
Following code didnt do it.
What am I doing wrong?
.subcontent {
min-height:50px;
width:100%;
background:#00CC66;
}
.leftcontent {
float:left;
min-height:50px;
width:100%;
background:url(images/bg_lpattern.jpg) repeat-x;
}
.rightcontent {
float:right;
min-height:50px;
width:100%;
background:url(images/bg_rpattern.jpg) repeat-x;
}
<div class="subcontent">
<div class="leftcontent">
</div>
<img src="images/bg.jpg" alt="Insert Logo Here" name="Insert_logo" width="400px" height="50px" />
<div class="rightcontent">
</div>
</div>
This may be complicated if you don't know exact dimensions of logo and your layout is fluid.
Width: 100% will stretch div to 100% and make next floating div to go to next line.
Why not use a large background image that will be say 1x6000px and make a y-repeat on it: you will cover the centre of it with overlaying image anyway so it matters not if you have anything under there or not.
Try this:
<div class="subcontent" style='width:100%; background: url("images/bg_pattern.jpg") repeat-y scroll center top #00CC66; border: 0 none; min-height:50px; text-align:center;'>
<img src="images/bg.jpg" alt="Insert Logo Here" name="Insert_logo" width="400px" height="50px" />
</div>
Where bgpattern.jpg is a loooong thin image... or if you need it to be some nice background (not just stretched one line of colour) then make it a huge image 3000x6000 or so and use it as a background - it will still work the same - centred under logo and sides will extend until you reach 6000px resolution.
I want these two text fields to be in the center of the page (horizontally and vertically)... What's wrong with my code?
<div style="vertical-align:middle; height:100%">
<center>
<form action="register.php" method="post">
Desired Username: <textarea type="text" name="user_username" style="width:60%;"></textarea><br>
Desired Password: <textarea type="text" name="user_password" style="width:60%;"></textarea><br>
<input type="submit" name="submitButton"/> <button name="Register">Register</button>
</form>
</center>
</div>
<center> is deprecated. Use CSS to center horizontally instead. For example, you can add text-align:center on the container and text-align:left on the element in question, or margin:0 auto for fluid width elements.
vertical-align:middle; only really makes sense for table cells or elements set to display:table-cell;. If you were trying to center an image or one line of text, it would be as easy as setting the line height of the element equal to its height.
Since we're looking at something a bit more complicated here, you just need to experiment a little. I threw this together:
html, body {
height:100%;
text-align:center;
}
form {
position:absolute;
width:100%;
top:50%;
margin-top:-1em;
}
I used -1em because if, for example, I had two lines of text, 1em would be half the height of the block that those lines occupy. Since inputs are about the same height as a normal uppercase character, give or take a few pixels, 1em should give you about half the height of the block that those inputs occupy.
You can center by giving your main content div fixed dimensions and then using margin: 25% auto; The auto will center it horizontally and the percentage should center it vertically.
Edit: Here is a better solution for vertically align that I have used in the past, you set a parent div with a height of 50% and negative margin bottom that is half of the content height.
So for example :
#parent {float:left; height:50%; margin-bottom:-50px;}
#child {clear:both; height:100px; position:relative;}
<div id="parent">
<div id="child">
Content
</div>
</div>
From this source
Putting it inside a table worked! apparently that property works for tables not divs..
<div style="height:100%; text-align:center;">
<table height="100%" style="height:100%;">
<td height="100%" style="vertical-align:middle; height:100%;">
<center>
new to css .
In asp.net mvc 3 I load a list of customers in a table.
Next to this table I would like to float some images.How do you do it in css?
thanks a lot
The answer depends on how much images you want and how they are aligned to each other.
The simplest form just floats the table left, see http://jsfiddle.net/NGLN/8AHhG/, but this only works for the height of the table.
Another form floats the images right, see http://jsfiddle.net/NGLN/8AHhG/2/, but that layout may not be disered.
You can also group the images, kind of a combination of both above, see http://jsfiddle.net/NGLN/8AHhG/3/.
float:right the images and lower the width of the table
Update
Example
<div id="container">
<table id="mytable">
</table>
<div id="images">
<img />
<img />
</div>
</div>
And the CSS
#container, mytable, images {
margin:0;
padding:0; /* Avoid excess of width due to margins or paddings */
}
#container {
width:1000px;
}
#mytable {
width:600px;
float:left;
}
#images {
width:400px;
float:right;
}
This way you should have now 2 columns, the left one which is your table, and the right one which is a div containing all the images, which should stick to the right of the table.
I'm slicing a psd, and there is a part of the screen that will repeat with as many items as it needs, similar to the question list of stackoverflow.
It needs to have this structure:
Is it possible? How should the css be?
Thanks!
You could try the following:
<style type="text/css">
#container {
width:60%;
}
#content {
width:100%;
}
#user-content {
float:left;
}
</style>
<div id="container">
<div id="content">
<div id="user-content">
<p>This can change depending on what is in here.</p>
</div>
<!-- The rest of the page's content goes here. -->
</div>
</div>
This makes the "content" div fill the rest of the space that "user-content" doesn't fill. It will only be an issue when your content is taller than the user content... but that's a different problem :)
This is another possiblity:
<style type="text/css">
#container {
width:60%;
}
#content {
width:100%;
float:left;
}
#user-content {
float:left;
}
#page-content {
float:left;
}
</style>
<div id="container">
<div id="content">
<div id="user-content">
<p>This can change depending on what is in here.</p>
</div>
<div id="page-content">
<p>This should take up the rest of the space.</p>
</div>
</div>
</div>
The problem lies in your left div where you state "width can increase depending on the content". How is this width defined? The div to the right can expand to 100% of the remaining space but you must define the relationship between the left and the right divs by either providing a fixed width to the left div or providing a percentage to both that equals 100%.
Well, as you’ve probably seen, so.com used fixed width div’s to achieve your layout goal.
Obviously my first tries setting the width automatically failed, but maybe I’ve a useful workaround for you: use left and right floating of both boxes.
<div style="border: 1px solid #000000; width: 60%">
<div style="border: 1px solid #444444; float: left;">
some text
</div>
<div style="border: 1px solid #999999; float: right;">
foo
</div>
</div>
Of course this will only help if I understood your question correctly ;)
As far as I know the only way to give your variable width container a variable width and float it to the left is to give it {width:auto;float:left;}
But I don't know if you can do anything useful with this because if you have text or a lot of small fixed width items to put in this container, they will keep expanding out along the first line until they've filled the width of the outer div before going on to the second line. They won't fill up the whole height and then push outward gradually as the text gets too much to contain.
Just a thought - you might be able to do some nifty JavaScript (possibly using jQuery?) which sizes those divs like you need them.