I have a Header (2300x328px) and another image (456x328px). Now I want this second image to extend this header to the left and right, that the header fills the whole width availiable.It needs to connect without overlapping, because there is a pattern.
Here is an image of what I mean: http://imgur.com/0ji3Hae
The circles are the pattern (why it should not overlap) And the Images to extend the header can be repeated infinitely.
For the pattern to align exactly you need to align the background pattern according to the header image (ex. center, left etc) and then make sure the pattern starts at the right place.
I made a fiddle to explain what I mean - http://jsfiddle.net/taneleero/g99xa/
.header {
background:url(http://i.imgur.com/BzVtzl4.jpg) repeat-x center;
}
.header img {
display:block;
margin:0px auto;
}
You have to add div bot sides with repeat-x.
I make an example for you on jsFiddle.
Html:
<div id="header">
<div class="extend"></div>
<div id="logo"></div>
<div class="extend"></div>
</div>
css
#header {
display: inline-block;
border: 1px solid black;
}
#header div {
display: inline-block;
}
.extend {
background-image: url('http://upload.wikimedia.org/wikipedia/commons/thumb/e/e2/Google_Chrome_icon_(2011).svg/64px-Google_Chrome_icon_(2011).svg.png');
height: 60px;
width: 100px;
}
#logo {
background-image: url('http://upload.wikimedia.org/wikipedia/he/3/3f/Microsoft_Outlook_Icon.png');
width: 64px;
height: 64px;
}
jsFiddle
// markup
<div id="header" style="height: 200px;"></div>
// css
#header {
background: url(images/preloader-w8-cycle-black.gif) repeat-x;
}
Related
.d1 {
background-color: red;
text-align: center;
}
<div class="d1">
<img src="http://www.aliceseelywholesale.net/wp-content/uploads/ADB101-DAISY-CUTOUT-NARROW-LINK-BRACELET-300x100.jpg">
</div>
I use the above simple code to display an image in the middle a div. Code works good however when I resize the window below the width of the image, the border/div doesn't cover the image... Is there a way to fix this? Ty
.d1 {
background-color: red;
}
.img{
display: block;
width: 100%;
margin: 0px auto;
}
Treat the Image as a block content not as inline-element.
I hope this helps.
If you want to use a backgound image for your <div> I suggest you set the image as a background-image for your div, and remove your <img> element.
This will save you from using an addition element and also fix your problem:
.d1 {
width:300px;
height:100px;
background-color: red;
text-align: center;
background-image: url(http://www.aliceseelywholesale.net/wp-content/uploads/ADB101-DAISY-CUTOUT-NARROW-LINK-BRACELET-300x100.jpg);
background-size:cover;
}
<div class="d1">
</div>
I am writing an HTML page with CSS. At the top of my page I want to show a header with an image and text (image to the left of the text). The image size is 64 x 64 pixels and I want the text to be large.
I was able to do almost everything except I want to align the text at the bottom but, no matter what I do, I can't seem to get the text to stop placing itself at the top.
Here is the HTML for my header:
<div id="container" class="container">
<div class="header">
<div class="header image"></div>
<div class="header text">Header Text</div>
</div>
</div>
and here is the CSS;
.container .header {
height: 65px;
border:2px solid red;
}
.container .header .image {
background: url("../images/icon64.png") no-repeat;
float: left;
display: inline-block;
width: 65px;
border:2px solid green;
}
.container .header .text {
float: left;
display: inline-block;
vertical-align: bottom;
font-family: sans-serif;
font-size: x-large;
border:2px solid blue;
}
I have been reading several web pages after searching for how to do this. I found one page that seemed pretty straight forward. They said you have to use inline-block for the display property in order for vertical-align to be honored.
I changed my CSS to what you see above but that still did not work. Here is what my header looks like:
(Note the border coloring is just for visualizing what's going on.)
Can anyone tell me what I am doing wrong and how to fix it so that my text is vertically aligned at the bottom?
Thank you.
That is correct, set elements as inline-blocks and use vertical-align. However, that means not to float the elements! Floated elements are floats and you negate the display: inline-block declaration: http://jsfiddle.net/qQtG9/2/ (I've cleaned your code some).
HTML:
<div class="header">
<div class="image"></div><div class="text">Header Text</div>
</div>
CSS:
.header {
border:2px solid red;
}
.header .image {
background: url("http://placehold.it/64x64")
no-repeat;
width: 65px;
height: 65px;
border:2px solid green;
}
.header .text {
font: x-large sans-serif;
border:2px solid blue;
}
.header .image,
.header .text {
display: inline-block;
vertical-align: bottom;
}
You can also try giving the #header a position:relative
and then give the .text position absolute, so if you give bottom:0; it will be stack to the bottom of the #header div
I'm currently creating a website, which has a centered box with text and and such.
Now, i also want a box floating on the right, with a little gap from my main box.
I'll leave a picture here, where the red box i drew is the floating box i want to make.
Btw. the blue box is just a censored box i didn't want on the picture.
So my question for you is, how do i make a floating box like that?
I've tried a couple of times with different methods.
in the CSS, i've made a box and gave it the property float:right;
But when i do that, it just turns out like this
Any help will be greatly appreciated
DEMO
You can keep an element center align by defining its width then using margin: 0 auto; technique. this will make sure your center div is in center then you can use position: absolute to create the other box on offset position.
HTML:
<div class="main-wrapper">
<div class="main">This is in center position.</div>
<div class="side">This is in offset position.</div>
</div>
CSS:
body {
background: #333;
color: #fff;
}
.main-wrapper {
position: relative;
margin: 0 auto;
}
.main, .main-wrapper {
width: 500px;
}
.main {
border: 1px solid #f00;
min-height: 500px;
}
.side {
width: 200px;
border: 1px solid #f00;
min-height: 200px;
position: absolute;
top: 60px;
right: -300px;
}
.main, .side {
text-align: center;
padding: 10px;
}
My best guess is that you have a <div> with a float: right; in the end. Keep it in the first code. So that it gets floated correctly. I would code this way:
<div class="right">Right</div>
<div class="main">
Main Contents
</div>
CSS would be:
.right {float: right; width: 20%;}
.main {margin: auto; width: 60%;}
Preview:
Fiddle: http://jsfiddle.net/praveenscience/8WHyp/
U can have main container display : inline-block
width of each sub container as width : 30%;
and width of the floating box which is inside 3rd sub container as
width : 100%;
In case u dont need first div,
put some margin for the 2nd container
ex .. margin-left : 300px;
and in case u dont want ur floating box width to be 100% of the 3rd container, u can adjust it too
I'm currently using 1 table to align 2 main portions of the site. It's causing problems for me now, so I'd like to use pure CSS.
I have a 205px wide navbar column on the left. Occupying the rest of the space on the right, I'd like to have a container (So on the right side of the screen, taking up screen width - 200 pixels) This container would not have a fixed height, but I want its top to be aligned with the top of the navbar.
Here's a demo of what I currently have .
I would like the solution to be similar to that, but not use tables, and have the top of the container aligned with the top of the sidebar.
I've made several attempts at doing this (before I started using the table, and after) but none of them even remotely worked. I've come here as a last resort, so I hope that someone could help.
Fiddle
.container{height: 100%; border: 1px solid #0f0; display: table;}
#sidebar{
width:40%; height: 100%; display: table-cell; background: #ccc;
}
#sidebar2{
width:60%; height: 100%; display: table-cell; background: #f00;
}
body, html {
height:100%;
}
HTML
<div class="container">
<div id="sidebar">links and whatnot go here</div>
<div id="sidebar2">this is the container (but its top is not aligned with the sidebar as I would like)</div>
</div>
Note: table-cell property is supported by supports IE8+
EDIT:
If you can't use table-cell then you have to use some jquery to calculate height. Check this Fiddle
I would do something like this:
. HTML:
<div id="container">
<aside id="sidebar">Links and whatnot</aside>
<section id="content">Content and whatnot</section>
</div>
. CSS:
html, body {
width: 100%;
height: 100%;
}
div#container {
height: 100%;
}
aside#sidebar {
background-color: #f00;
width: 205px;
min-height: 100%;
float: left;
}
section#content {
background-color: #0f0;
min-height: 100%;
}
You can see it working in this fiddle.
I have gotten the assignment to code a website from tables to CSS. While this is easy I have one question on how to recreate one of the site's biggest detail.
Site is: www.optimizer.dk.
How can I recreate the labels coming out of the left side, while still having the content in the middle?
Rest of the site is no worries.
Is the solution to:
padding-left: 200000px;
margin-left: -200000px;
To fake the expansion to the left?
I would possibly do it like this:
Live Demo
CSS:
html, body {
margin: 0;
padding: 0;
border: 0;
overflow-x: hidden
}
body {
background: #eee
}
#container {
width: 300px;
margin: 0 auto;
background: #bbb;
}
li, li span {
height: 25px;
}
li {
position: relative;
width: 200px;
background: #777
}
li span {
display: block;
position: absolute;
width: 9999px;
left: -9999px;
top: 0;
background: url(http://dummyimage.com/50x30/f0f/fff)
}
HTML:
<div id="container">
<ul>
<li><span></span>Menu Item</li>
</ul>
<div id="content">
Hi!
</div>
</div>
This answer was based on an older answer I wrote: 'Stretching' a div to the edge of a browser
Ideally here you would want a fluid width. See: http://jsfiddle.net/cbNvn/1/
<div id="left">Left</div>
<div id="center">Center</div>
<div id="right">Right</div>
div {
float: left;
}
#left {
width: 25%;
text-align: right;
}
#center {
width: 50%;
}
#right {
width: 25%;
}
Expanding the page would expand the left column and the background image can repeat. The linked images can lay over the background as they do currently. The text-align:right attribute will keep the linked images on the right.
You need 3 divs with float:left to create the 3 columns
i would put it all in a div and set position:absolute;. then put your buttons in there own divs so you can move them.
or
put it all in a div and set the margin to -5%(mite need to play with this into it works). then make the image the background and put you text buttons in there own div's so you can move then to where you want them.
Then use float:left; to line them up