I'm trying to place an image above the top bar of a div on my website on the left side of where the navigation bar is. My Attempt
It should look Like this
And I would like it to look Like this
I've tried multiple things such as placing the div for the image in different spots in the code, and changing css elements for the div, but everything seems to push the other content images out of place on the website
add this ...
.photo {
position: relative;
top: 4px;
}
and change the margin on #container to...
#container {
margin-top: -1px;
}
Your css isn't in very good shape, but, using your methods here's how to do it:
remove the margin-top from #container
add vertical-align: top to the img inside #photo
change the top in #extraDiv1 to 246px
change the top in .horizontal to 218px
I guess that should do it.
Related
I am trying to created a CSS design on my web app. I am going for a banner that is flapping in the wind. I want the banner to expand/scroll its height so all text will be displayed on the banner but regardless of how tall the banner is, I want to add a ripped section of the banner at the bottom of it. The banner will be the same width in all cases.
Something like the example below (forgive the horrible Paint screenshot):
I can't seem to wrap my brain around how to accomplish this. Any of you smart people have any ideas?
First, I think it'd be helpful if you could provide an example of what you have so far. For example, what's your HTML & CSS for the adjustable-height divs, just without the image at the bottom? Easier to add onto that.
I believe the best way would be to add an image element at the bottom of your adjustable element (assuming it's a <div>). Position it as absolute, and set it relative to the bottom of its parent container. You may have to fiddle with it a bit to get it to work. Don't forget to also set the position of the parent to relative.
If you'd like to see the shoddiest example ever, go here: https://jsfiddle.net/c2ptfv8o/
Good further reading on position: https://developer.mozilla.org/en-US/docs/Web/CSS/position
Give the container element "position:relative" (to create a new positioning context) and some bottom padding (to make space for the image). Then you can either use a background image set to be at the bottom of the container and not repeat vertically or absolutely position an image to the bottom.
You can use pseudo-elements for this. This way you don't require extra markup for each element.
.myDiv {
position: relative;
}
.myDiv::after {
content: url(image.jpg);
display: block;
position: absolute;
left: 0;
top: 100%; /* will be placed immediately where the div ends */
width: 100%;
}
Based on the height of the 'banner curls', set a margin-bottom on .myDiv.
Or directly, without absolute, as long as you don't have paddings:
.myDiv::after {
content: url(image.jpg);
display: block;
width: 100%;
}
I want to position a few small images beside a div and margin them correclty instead of being overlapped by the emphasized textcenter-div.
JSFiddle Demo:
`http://jsfiddle.net/k7gLfeuc/`
The Problem is: When I scale the browser-window, the images disappear behind the "center"-div instead of margin to it.
Both Navigation-Div and Center-Div are margin pretty well to each other. But the images wont.
I tried it already with "clear:left/right/both", but with no success.
What am I doing wrong? I just want the images left to the center-div to margin correctly to the center-div.
Than you.
Is this what you need? live demo http://jsfiddle.net/k7gLfeuc/2/
Add below to your existing code:
#side {
left:0;
width: 19%;
overflow: hidden;
}
I have a wrapper div with some content in it. Here is its css:
.wrapper{
width: 85%;
min-width: 970px;
max-width: 1500px;
margin: auto;
padding: 0.3%;
}
Now, within this div, I have another div, which I will call div2. It has no relevant styles to it, aside from cosmetic ones (background, font-color, etc.). Its behaviour is to simply take up the entire width of the wrapper div, no matter what the browser's width, zoom, or screen size is. This is as expected, and nothing is wrong here. I'm trying to make an addition onto this, and that is where I'm having trouble.
I have an image that I want to display, such that the bottom of the image is in line and touching the top of div2, and on the right side end of div2, so that the right end of the image is also in line with the right end of div2.
This would sound simple enough to do, but I don't want this image to mess with the vertical space. Adding the image in will of course introduce a larger gap between div2, and any element above it, which means I have to use position:absolute to take the image out of the regular flow of the page. However, my attempts at keeping the image at this same position, in line as described, have been unsuccessful. How can I keep this image aligned at all times, and under all possible user display circumstances, without having this large gap?
I've tried using the offset CSS top and left to move the image, but it doesn't work for all screens/zooms/resolutions/browser widths, and this isn't something I can practically use media queries for.
I'm not quite sure if I got you right, but I guess you need to:
#div2
{
position: relative;
width: 100%;
overflow: visible;
}
#div2 img
{
position: absolute;
bottom: 100%;
right: 0;
}
EDIT: Place your image inside of #div2.
So, your image, will always be on the right top of #div2. That's what you wanted to do?
I want that if people scroll over the page, the header will keep showing (logo + navigation bar). This is the css code I'm using:
#header_bar
{
margin: 0 auto;
width: 100%;
background-color: #1F1D1E;
height: 80px;
position: fixed;
top:0;
}
But this is what happens now: http://puu.sh/6FiXY.jpg
As you see the header now overlaps the image, how can I fix this? I've tried using margin-bottom / padding-bottom, but margin does nothing while padding makes the background box larger.
How can I fix this?
Supposing your HTML structure looks like
<div id="header_bar">...</div>
<div id="someOtherDiv">...</div>
Add margin-top to the next element after #header_bar
#someOtherDiv {
margin-top:80px; /* 80px because #header_bar is taking up 80px in height. */
}
demo
Since your header has a fixed position all your other elements will not take this into account. You could create a "wrapper" div for all the other content that is positioned 80px from the top. Just adding a margin or moving the element of the most top div might work too as long as it has relative (default) position.
You should be adding a margin to your content tags so that they are not instantly overlapped by the header.
See here: www.jsfiddle.net/cranavvo/5F8EP/
I'm trying to create a vertical navigation that drops down to the right when I hover over page names that offer subpages. when I hover over, it appears beside it but the content appears on top of it. I want my navigation to be on top of everything. I tried using z-index. I used 32, 999, 1000, 10000 for my z-index. I tried switching my menu from position:absolute to position:relative but it just adds unwanted space. I tried setting my content to position:absolute with a z-index, lower than the one in my navigation. Here is the link:
http://michellecantin.ca/test/
Your help would be appreciated!
The relative position of your container div a the problem. Float it to the right instead:
#container {
position: relative;
left: 26%;
width: 72%;
}
should be:
#container {
float:right;
width: 72%;
}