I want to make a header with a image in it that will use the whole width of the browser even when zoomed out. Directly under that #slider-wrapper with the image in it is the #main-content. But that div is postioned directly after #topheader now as you can see what indicates my problem. That div must be right after the #slider-wrapper (and thus ) but because #slider-wrapper is positioned absolute, the div #main-content is positioned after #topheader.
How can I get the #main-content positioned after the #slider-wrapper? Is there some other way to make the header image use the whole width of the screen instead of position absolute? Please help me with this, trying this for hours now.
I have made a jsfiddle for the first time that's not 100% correct but it will do I think. So atm the header image is using the whole screen even after zoomed out but I can't get the #main-content positioned well. Thanks alot
https://jsfiddle.net/hj28fuw7/4/embedded/result/
https://jsfiddle.net/hj28fuw7/4/
If I understand your issue correctly, I think what you need to do is set a top margin on the #main-content to the value of the height of the #slider-wrapper. i.e.
change:
#main-content {
width: 1060px;
margin: 0 auto;
border: 1px solid #000000;
}
to:
#main-content {
width: 1060px;
margin: 426px auto 0px auto;
border: 1px solid #000000;
}
Related
I am trying to stick my pop up to top and make it a bit smaller to fit the screen.
Here is my landing page URL - yogavoga.com/2weekdiet
Any help will be appreciated.
.modal-content {
margin: 5px auto;
background-color: #fefefe;
border: 1px solid #888;border-width:3px;
width: 90%;
}
I'm not sure if this solves your question in full, because your sample code is a bit short and it doesn't show the element itself. I tried visiting your website, but can't find the element. So it is very difficult for us to say what you actually want.
margin is the space around your div element, in this case your modal. With your code you say your browser to put your element at the top, (0 margin at the top), and do the rest automatically. It does that and will center your element based on the width of your element.
You can scale your element with width. Make it smaller by reducing the percentage.
.modal-content {
margin: 0 auto; // 0 from top, left, bottom and right auto.
background-color: #fefefe;
border: 1px solid #888;
border-width: 3px;
width: 60%; // Width of your element.
}
TIP: remove the margin and padding presets from your body to have your element at the absolute browser border.
I know similar questions have been asked but I've not seen this one. !
I have 3 divs on my page.
WRAP is the main page wrapper and provides a border around the inner divs.
OUTER is the outer div
RIGHT is the div I want to move as the page scrolls.
You can see on this image where RIGHT sits, as the page scrolls down I want right to move with it.
I've tried setting the CSS position to fixed, but if the page is resized this messes up the layout. The css I currently have is :
#wrap
{
width: 100%;
margin: 50px auto;
padding: 20px 20px 20px 20px;
border:2px solid #800000;
}
#outer
{
margin: auto;
width: 700px;
height: 1250px;
display: table;
border: 2px solid #000008;
}
#right
{
float: right;
width: 100px;
height: 100px;
border: 2px solid #008000;
}
I've created a fiddle with how this currently looks.
How do I get right to move correctly with the page ?
Thanks
RouthMedia's answer works, but if you have different constraints, like "it shouldn't be on top of the content if the window is smaller than the layout"
To solve that, you can have a window.onresize function that changes the div's right position depending on the constraints you want to have.
window.onresize = function(event)
{
// is the window smaller than something it shouldn't? calculate the new position
("#right").css("right", newpos);
};
Edit: saw you don't want it out of the outer div.
One way to do it: When the page loads, set the "right" property to something that puts it inside the outer div. If the screen resizes, update it.
Another way to do it: use position: absolute, and update the "top" property with the document.scrollTop value when the onscroll event fires.
Add position:fixed; right:0px; to your #right div.
I am a bite confused on what is happening here. I put my body margin set to 0 in my css and then all the div elements stretch across the screen like I want, but I want this to apply for only one. From a previous question: HTML Image going across entire screen
An answer said to use position:absolute and then change the position of the div elements. I used to have position:relative on these div elements and when I changed that to absolute, it combined all the div elements in one position. I tried moving them with bottom:then whatever pixels, but still did not move it at all. Would this be the way to move it? What would I do? On W3 schools: http://www.w3schools.com/css/css_positioning.asp
It tells me a lot about positioning div elements, but when I tried to use this it did not work on one div element I tried, but instead overlapped it.
How would I move these div elements?
Code CSS
#middle-4{
position:absolute;
left:0;
right:8;
bottom:0;
top:-800px;}
Code HTML
<div id="middle-4" style="background-image: url(images/Home/rock.png); height: 540px; width: 1348px; border: 1px solid black;"></div>
This is done so for as you can see up to 4 div elements.
If I understand your question correctly you want all element to conform to the default body margin except one element (or multiple elements using a class).
I would do it like this...
Give body a specific margin to ensure it is consistent across browsers.
Use negative horizontal margins to pull your element outside of the constraints of body
body {
margin: 8px;
background: lightGreen;
}
div {
background: lightBlue;
padding: 30px;
border-bottom: 1px solid blue;
}
.fullwidth {
margin-left: -8px;
margin-right: -8px;
}
<div>I'm constrained by body</div>
<div class="fullwidth">I'm full width</div>
<div>I'm constrained by body</div>
Setting margin on body only ensures cross-browser consistency as mentioned by uʍopǝpısdn
If you have 4 divs containing an image each, you should stick to position: relative - this will line up the divs / images vertically on top of each other.
Your issue might have to do with image sizes - if you want all images to keep their original size, you can keep their attributes for width and height as specified in your example "middle-4": height: 540px; width: 1348px;
However - do you want one div / image to stretch across the width of body / screen, you will have to apply the size in percentage - this can be done in 2 ways:
CSS3 - you have the options of "cover" or "contain", which can be applied to div as youre doing it now - example:
div {
background: url(images/Home/rock.png);
background-repeat: no-repeat;
background-position: center;
background-size: cover;
}
CSS2 - you can apply a class to the image itself, and forget about the surrounding div - example:
<img src="images/Home/rock.png" class="img_width" />
.img_width {
width: 100%;
height: auto;
}
I have a problem with my web design. I have a div class="main-area" containing 2 div's.
div class="half"
div class= "half second-half"
the .half contains text and the .second-half contains a picture. For images I have the following css:
img max-width: 100%;
height: auto;
margin: 0 0 10px 0 ;
but when i scale the browser down, the image scales with the browser but sticks in the vertical middle of the main-area div.
How can i make my second-half div stick to the top of the main div??
I tried margin-top -xxxx px and - xxx% but this does not work since the image scales so the main div scales.
here are images wich show what i mean, hope this helps because i dont know what jsfiddle is and how it works.
i got the link to the jsfiddle down below
http://jsfiddle.net/8zaSy/
i hope this is good enough?
try this
.second-half img { max-width: 100%;
height: auto;
float:left;
marging-top:10px;
}
Please check the code JSFiddle
It seems you just want your image to be aligned top of the page. If this is the issue, then i have added it in the js fiddle above.
#indexpic {
border: 1px dashed grey;
border-radius: 5px;
/*margin-top: 180px;*/
}
If you have any other issue, then please comment, and modify the JSFiddle.
Regards D.
in the header section of my web page, the design is something like the logo and navigation div should overlap a repeat-x image(i.e bg-header).
this is the html i have used
<div id="header">
<div id="header-bar">
<p>kljslakdjlaskjdkljasdlkjasdlkjaskldjasjd</p>
</div>
</div>
and this is the css
#header {
min-width: 1040px;
height: 111px;
position: relative;
}
#header-bar {
margin-top:50px;
height:53px;
}
now when in the #header-bar if i give margin-top:50px then the header div shifts the position to 50px from top. i want to achieve something like
the header div is to define the height of the header content.
i want to wrap header-bar in the header div and the elements or the div wrapped inside the header div should should have the margin of 50px from within the header.
for example the header-bar should have a margin of 50px from the top of the header div.
when i use the above code it moves the position of header div too. i want the header div to be fixed on top only the sub div or content within the header div is what i want to position.
hope i am not confusing you.
where i am going wrong?
thank you
EDIT: it works if i use padding-top but excluding the background with repeat-x property.
i want to move the image with repeat-x property. in the header-bg div
Margin doesn't affect the position of elements relative to their parents.
To achieve the effect you want, you need to use padding on the #header, for example:
#header {
min-width: 1040px;
height: 61px;
position: relative;
padding-top: 50px;
}
#header-bar {
height:53px;
}
If you add "overflow:hidden" to the #header div, it'll work like a charm! Note that there is padding, but also margin. If you remove the padding, there will still be space left, that's the margin!
Jsfiddle example here
Use padding on the header div rather than margin.
#header {
min-width: 1040px;
height: 111px;
padding:50px 0px 0px 0px;
}
#header-bar {
height:53px;
}
You're running into something called margin-collapse. In essence, adjacent margins will collapse together, and only display the larger one - that is, the one with more absolute distance from 0. Since your #header margin (0px) is adjacent to your #header-bar margin (50px), the 50px margin is the one that is displayed, and it affects both of your elements.
If you were to add even 1px of padding to the top of #header, you would get the desired effect:
#header {
min-width: 1040px;
height: 111px;
position: relative;
padding-top: 1px;
}
I'm not sure I understood the question.
Does it seem like your answer : link ?