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.
Related
For a simple landing page I wanted to let some text box overlap an header image. To make it simple, I just have a structure like:
<header>
<img src="path/to/img.png" />
<h1>Awesome headline</h1>
</header>
All elements are set to display:block and the h1 is dragged inside the image with a negative margin. I also gave the headline some padding and background:white.
Now the problem: The headline text is shown on top of the image but the background colour is behind it! You can see an example here: https://jsfiddle.net/cv12evLn/
My guess is, that a browser renders all sibling blocks in layers, starting with all backgrounds and borders, then rendering images (img-tags) and finally text on top of everything else.
Is that right? And why the actual… I mean, that seems crazy unexpected to me.
To solve the issue, I've put the headline in a wrapper and set this to position:absolute. See here for a live example: https://jsfiddle.net/f5sd1u6o/
Use position:relative rather than negative margin. Then the z-index works automatically.
#container {
width: 500px;
height: 300px;
margin: auto;
}
#container img {
display: block;
width: 100%;
}
#container h1 {
display: block;
width: 50%;
height: 1em;
margin: auto;
padding: .5em 1em 1em;
font-size: 3rem;
background: yellow;
text-align: center;
border: 1px solid red;
position: relative;
top: -4.6rem;
}
<div id="container">
<img src="//placekitten.com/500/300">
<h1>
headline
</h1>
</div>
To get the Z-index to work, you need to apply position:relative anyway but you can still use negative margin if that is a design requirement.
JSfiddle demo (with negative margin)
Basically, backgrounds are rendered first before anything else (as I understand it) so they always come at the bottom of the stacking order. You just need to create a new stacking context and changing the position property does that.
As it happens so does changing the opacity of the element so a quick fix is to set opacity:.9999;
JSfiddle Demo (opacity 'hack')
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;
}
I am finding some HTML\CSS difficulties with this web page: http://www.saranistri.com/saranistriWPnew/?page_id=613
As you can see in this page there is an immage named: abusivismo1-641x321.jpg
This immage is into this div containers structure:
The div having clasas vc_span12 wpb_column column_container contains this other div having class wpb_wrapper that contains itself wpb_single_image wpb_content_element centerizedImg that contains the div having class wpb_wrapper that finnally contains my abusivismo1-641x321.jpg
I want to center this immage in its container in such a way that is at the center of the page
I have try to set some CSS settings like:
width: 642px;
margin: 0 auto;
but not work
Can you help me?
Tnx so much
Andrea
Here is the solution.
.wpb_content_element.wpb_single_image img {
display: table;
height: auto;
margin: 0 auto;
max-width: 100%;
}
Replace the above values in your class .wpb_content_element.wpb_single_image img and your image will be at the center.
Hope this helps.
Just add this style to that class :
.wpb_single_image.wpb_content_element.centerizedImg {
text-align:center
}
if you want sure to get only the images centered, style your wrapper of the images with display:inline-block;
just a simple solution without margins.
in order to centralize any element, you may use
margin-left: auto;
margin-right: auto;
also, an element will stay at center if it's patent has a text-align: center
You may also have a look at Dead Centre
Just use text-align:center; for your wpb_wrapper class. Have a look at this fiddle
Use margin-left:auto; and margin-right:auto; it will horizontally align to center.
In some cases, depending for what you use this, the image is not resized automatically when you resize the browser; i.e. mobile browsers. I came up with this:
.wpb_wrapper {
display:inline-block;
max-width: 100%;
height: auto;
width: auto\9; /* ie8 */
padding: 0px 15px 0px 15px; /* adds some white space in left/right on mobile */
}
Hope it helps someone.
i am working on an image hosting website, and for some reason the images in the gallery overflow their maximum width border
max-width: 495px;
full CSS:
.imagebox{
border: 1px solid gray;
height: 495px;
width: 495px;
background-color: #ffffff;
text-align: center;
line-height: 495px;
}
.image_container img {
vertical-align: middle;
max-width: 495px;
}
screenshot of how the overflowing images look:
Also, anyone has any tip on how to remove those annoyimg default image borders?
Thank you for taking the time on reading my post, any help will be gladly appriciated.
You can remove image border in css img {border:none, outline: none;}
Have you tried reducing the max-width slightly to see what happens? (Maybe to 485px)
For removing the borders, I am not sure how many images you are working with but you could always go the old-fashioned route - open it up in an image editing program and downsize it from there :)
I think the problem is the picture's border. The picture's width is 495px, as you set, but it's right border goes over the max-width and the left border pushes the image even more to the right. If the border is 1px, make the pic's width to 493px.
About how to remove them, I don't understand your question because you set the border to "1px solid gray". try setting "border:0;".
I have spent hours looking for a solution and cannot find anything on this particular issue, so please forgive me if it has been answered.
I have a standard CSS page with a masthead, a navigation row, a left column for links, a right column for contents and a footer.
I have set everything to the center of the page at 1024px wide.
What I just cannot achieve is to have the 2 columns stay at the same height when one has longer content than the other.
Let me explain this - both columns have a 1px border that I would like to extend all the way down to the footer. The right column has much longer content so it reaches the footer very quickly but the left column doesn't so the border stops, where the links finish.
To fix this problem I have set the heights to 100% in the html, body, container and the two columns as follows:
html {
height: 100%;
}
body {
height: 100%;
}
#masthead {
width: 1024px;
height:100px;
margin-left:auto; margin-right:auto;
}
#top_nav {
width: 1024px;
height:100px;
margin-left:auto; margin-right:auto;
}
#container {
width: 1024px;
height:100%;
margin-left:auto; margin-right:auto;
}
#left_col {
width: 198px;
float: Left;
height: 100%;
border: 1px solid #FF0000;
}
#page_content {
margin-left: 200px;
width: 824px;
height: 100%;
border: 1px solid #000000;
}
#footer {
bottom: 0px;
clear: both;
width: 1024px;
height: 50px;
margin-left:auto; margin-right:auto;
border: 1px solid #000060;
}
This works BUT now the content of the right column (which is much longer) goes way past the footer? and no matter what I try I cannot fix this without affecting the left column's border i.e. I can use min-height: 100%; which fixes the overflow and footer problem, BUT this has the side effect of capping the border on the left column back to the Navigation link's height i.e. so the border no longer flows to the bottom of the left column and down to the footer (grrrhhh!)
Here is a link to the page itself which you can copy and paste into DW or EW etc. to see what's going on:
http://www.iifuture.org/downloads/testzzz.html
If anyone knows how to fix this paradox I'd love to know about it!
Thanks
Shaun
Actually scratch that : remove the height:100% on the container, left col and page content. That's it.
Edit(revised answer after discussions)
This article helps.
style="background: blue url(someimage.png) repeat-y left;"
Add the above style to container. This is a hack, the DIV doesn't grow but the background image covers it up to get the layout you want!
Please refer this question and answer selected to learn more.
Original answer
Please take a look at overflow property. I was able to get your example page working with the below style added to page_content DIV.
position:absolute;overflow:auto;
With this code the scrollbars appear if the content exceed the height set. If you do not want to get the scrollbars and are okay with not showing the data beyond the DIV height, just use hidden instead of auto. Likewise, to display the scrollbars at all times, you may use scroll.
The last option visible will make it *(mis)*behave the way it is behaving right now i.e. letting the data grow beyond the DIV height. Notice that the DIV is not growing, only the content is.