Closed. This question does not meet Stack Overflow guidelines. It is not currently accepting answers.
This question appears to be off-topic because it lacks sufficient information to diagnose the problem. Describe your problem in more detail or include a minimal example in the question itself.
Closed 8 years ago.
Improve this question
I have three images: one.png, two.png, and three.png. Using CSS, how would I fix one.png to the top-center of the page, three.png to the bottom-center of the page, and two.png to the middle of the page? two.png should be vertically- and horizontally-aligned the entire setup should be consistent when the viewport is resized. Thanks a lot!
For the top and bottom images, you'll want to position:absolute; and add either top:0px or bottom:0px;
The middle one, you'll also want to add position:absolute;. In this case, there's a few other CSS tricks that will help center this vertically.
img.two {
top: 50%;
height:100px;
margin-top: -50px; /* Half the height */
}
See my fiddle here: http://jsfiddle.net/9GFu9/2/
Related
Closed. This question needs to be more focused. It is not currently accepting answers.
Want to improve this question? Update the question so it focuses on one problem only by editing this post.
Closed 6 years ago.
Improve this question
I'm fairly new to CSS. As you can see, my web page currently has a lot of space to the left and right of my content, making my navigation bar very long. I'd like to set this to be less wide without effecting how responsive my theme is on mobile or tablet.
I'd also like to centre the social media icons/widget at the top beneath my logo, and to center the links in my navigation bar.
Website here:
http://aspectcopywriting.co.uk/
Can anyone help?
Thanks
While the CSS in Emily's answer does work, it's not the proper way to center a div. According to W3C you should use width and margin on the element that holds the social icons and navigation tabs you wish to center, as seen below:
.social_container{
width: 225px;
margin: 0 auto;
}
.nav_links_container{
width: 605px;
margin: 0 auto;
}
This will center those items within their parent elements.
Well, this is pretty easy. All you need to do is select the div where you wrapped up your social media icons and use the properties text-align with value center. Like this:
.widget_catchresponsive_social_icons {
text-align: center;
}
Everything should be centered now!
For some more reference check in MDN:
Closed. This question needs debugging details. It is not currently accepting answers.
Edit the question to include desired behavior, a specific problem or error, and the shortest code necessary to reproduce the problem. This will help others answer the question.
Closed 6 years ago.
Improve this question
I have a hero image, and on the top of it, I want a logo and menu,
I have given below properties to hero image. and for nav bar I have given a position: absolute; and width : 100%.
I dont want that horizontant scroll bar, please help.this is how my page look like
height: 551px; width: 100%;background: url(../_images/banner_1.JPG) no-repeat;background-size: cover;position: relative;
You mean window horizontal scroll-bar, so to hide that add below code and change you navbar div to 100%,
body{
overflow-x:hidden;
}
for removing horiontal scroll bar
add overflow-x: hidden
Closed. This question does not meet Stack Overflow guidelines. It is not currently accepting answers.
This question appears to be off-topic because it lacks sufficient information to diagnose the problem. Describe your problem in more detail or include a minimal example in the question itself.
Closed 8 years ago.
Improve this question
I am trying to align an image and span text side by side, but it's not happening,
can someone give directions please?
this fiddle has a grid with 3 columns, in second column i need to display an icon first(left aligned in th) and then a text wrapped in a span just after image-side by side of image, currently it's going on bottom of th.
in img tag:write float:left; and increase width of that div to 150px
Try this one:
I have added fiddle:
JsFiddle
Closed. This question does not meet Stack Overflow guidelines. It is not currently accepting answers.
This question appears to be off-topic because it lacks sufficient information to diagnose the problem. Describe your problem in more detail or include a minimal example in the question itself.
Closed 9 years ago.
Improve this question
2 weeks ago I started with learning HTML and CSS, and I really enjoy it.
I've been struggling with getting my footer(div) to resize with my background on my Home page, though. So whenever I zoom in or out the background stays, but the footer(div) moves around. The same when I resize my browser.
It just looks weird. You can say I want to "glue" my div to the background so they resize and move together. It's hard to explain, but try taking a look.
http://www.futureplane.net (the website is still in a work in progress, not finished at all)
It doesn't look great.
Does anyone know how I can fix this?
You have min-width: 1200px set on #wrapper. That's creating an issue with the nav area not being flexible if the browser is resized. However, you will need to refactor the <nav> elements so they also resize in with the nav/footer bar. You might try using float instead of position to start with.
Example:
#navbar {
float: right;
margin-left: 700px;
margin-top: -155px;
width: 50%;
}
Closed. This question does not meet Stack Overflow guidelines. It is not currently accepting answers.
This question appears to be off-topic because it lacks sufficient information to diagnose the problem. Describe your problem in more detail or include a minimal example in the question itself.
Closed 9 years ago.
Improve this question
I have a website with a fixed image at the top of my screen. When I scroll down my page the image stays at the top like it should. However, all content below overlaps my image and it is then covered.
How do I make my top bar (image) always stay on top? I want it to cover the content of the page as you scroll.
Ensure position is on your element and set the z-index to a value higher than the elements you want to cover.
element {
position: fixed;
z-index: 999;
}
div {
position: relative;
z-index: 99;
}
It will probably require some more work than that but it's a start since you didn't post any code.
Assuming that your markup looks like:
<div id="header" style="position: fixed;"></div>
<div id="content" style="position: relative;"></div>
Now both elements are positioned; in which case, the element at the bottom (in source order) will cover element above it (in source order).
Add a z-index on header; 1 should be sufficient.