I am trying to get an oversized image to horizontally stay centered within a list element. When scaling the window down, you'll see that right side of the image becomes hidden. This is what's meant to happen, but I want the original image to stay centered thus becoming hidden left and right side. Can anyone help please?
FIDDLE HERE
#photo-container{
list-style-type: none;
width:100%;
overflow:hidden;
text-align: center;
}
.photo{
width:100vw;
min-width:600px
}
<div>
<ul>
<li id="photo-container">
<img class="photo" src="https://brianrashid.com/wp-content/uploads/2015/09/NYC-FORBES-1940x970.jpg">
</li>
</ul>
</div>
You can try using position + transform tricks.
.photo {
...
position: relative;
left: 50%;
transform: translateX(-50%);
}
jsFiddle
From the examples that I have seen this can be achieved by using
right: 0px;
top: 0px;
Or some variation of this. However when I do this, my div stays tight left of the screen. I need to start going into -1000px area to make it appear at the top right, which doesn't seem right.
Here is my HTML, and it is the div with the class "mysettings-menu" I am trying to place at the top right of the screen.
<div class="navbar-collapse collapse">
<ul class="nav navbar-nav">
<li>#Html.ActionLink(...)</li>
<li>#Html.ActionLink(...)</li>
<li>#Html.ActionLink(...)</li>
</ul>
<div class="mysettings-menu">
<ul>
<li>
Settings
<ul class="sub_menu">
<li>Log In</li>
<li>Add New Application</li>
</ul>
</li>
</ul>
</div>
</div>
As you can see I am using some default bootstrap classes, but even putting my div outside of these divs doesn't make a difference as it remains as close to the left side of the screen as it can get.
.mysettings-menu { position: relative; right: 0}
To put it on the top right,:
.mysettings-menu{
position: absolute;
right: 0px;
top:0px;
}
ie. Change the position to absolute.
First of all,
position: relative
means relative to the current position of the element. Combined with
right: 0
it certainly doesn't affect the positioning of your div.
What you want is
.settings-menu { position: absolute; right: 0; top: 0; } or .settings-menu { float: right; }
though both are different in some ways and similar in some other.
If you are using Bootstrap, then you can add the class pull-left. That basicalley add the propertie float: left !important to your div to make it float left (you can use it to the right too)
The majority of the position property is relative to the parent container.
If you want the div to be position to the top right of the its parent container you need to specify the position as absolute:
.mysettings-menu { position: absolute; top:0; right: 0; }
Alternate values for the position property are:
static (default)
relative
fixed
fixed is the only position property that does not position relative to its parent container, but positions relative to the window.
For example:
.mysettings-menu { position: fixed; top:0; right: 0; }
would set the div to be displayed in the very top right of the window regardless of where you scrolled to - it would always be visible.
jsfiddle demo
html
<div class="navbar-collapse collapse">
<ul class="nav navbar-nav" style="display:inline-block">
<li>#Html.ActionLink(...)</li>
<li>#Html.ActionLink(...)</li>
<li>#Html.ActionLink(...)</li>
</ul>
<div class="mysettings-menu">
<ul>
<li>
Settings
<ul class="sub_menu">
<li>Log In</li>
<li>Add New Application</li>
</ul>
</li>
</ul>
</div>
</div>
css
.navbar-collapse{
border:1px solid red
}
.mysettings-menu{
border:1px solid blue;
display:inline-block;
position:absolute;
right: 10px;
What about this:
http://jsfiddle.net/lharby/zs15e48q/
CSS:
.nav {
float:left;
}
.mysettings-menu {
float:right;
}
As others have mentioned you could also use absolute positioning, but it depends if you want to change the flow of the document.
EDIT
As one answer points out (Yerko Palma) if you are using bootstrap you can add pull-left and pull-right classes to your elements, this is actually a better solution than writing new css for the existing elements.
Updated fiddle:
http://jsfiddle.net/lharby/zs15e48q/1/
I'm trying to make a header bar that contains an image followed by a title and the a menu car.
The bar is displayed after 50px and I want the image to be moved up slightly so that its over the top of the wrapping div and showing a bit in the 50px above.
Using position absolute on the wrapping div and position relative with the image then moving it up by 20px works fine but when I do this the rest of the elements in the div stay below it. Is there a way to move those other elements up to they are inline with the image?
I've made a simple jsfiddle of what I'm trying to do here: http://jsfiddle.net/67sTt/
HTML:
<div class='headerContainer'>
<div class='logoContainer'>
</div>
<div class='title'>
<h2>Header</h2>
</div>
<nav class='menu'>
<ul>
<li>first</li>
<li>second</li>
</ul>
</nav>
</div>
CSS:
.headerContainer {
top: 50px;
background-color: green;
position: absolute;
width: 100%;
}
.logoContainer {
height: 120px;
width: 120px;
background-color: red;
display: inline-block;
position: relative;
top: -20px;
}
.title {
font-style: italic;
display: inline-block;
position: relative;
padding: 0;
}
.menu {
display: inline-block;
position: relative;
}
I need the title and the menu to line up in the middle of the image(the red box).
Using position: absolute moves them to the top which is fine but the title and the menu layer on the top of each other.
I know I could use this and give the menu some padding to the left so that it sits next to the title but when the page size is reduces the menu moves below the image and title so I don't want the padding shown then, and I'd rather not come up with some hacky jquery way of managing that if it can be done in css only.
like this? http://jsfiddle.net/67sTt/1/
add:
vertical-align: top
to menu and title
I am able to get my dropdown navigation to stay at the top using absolute positioning, but it squishes the left side and everything at the top goes behind the navigation.
How can I get my navigation to stop overlapping everything else with the position:absolute property? My nav elements are in my CSS, so an invisible <div> won't work.
The following is the HTML in my header.php document:
<center><nav>
<ul>
<li>Home</li>
<li>Arcade
<ul>
<li>Action</li>
<li>Arcade</li>
<li>Puzzle</li>
<li>Vehicle</li>
<li>Violence</li>
<li>Defense</li>
<li>RPG</li>
</ul>
</li>
<li>Watch
<ul>
<li>TV Shows</li>
<li>Movies</li>
</ul>
</li>
<li>Extras
<ul>
<li>Reviews</li>
<li>Updates</li>
</ul>
</li>
<li>Support</li>
</ul>
</nav></center>
The following is the CSS I am using for the background color and positioning before the position is added:
nav{
background-color:#989898;
margin: 0px -12.5%;
}
Now the CSS after I add positioning:
nav{
background-color:#989898;
margin: 0px -12.5%;
position:absolute;
z-index:1000;
}
My website is www.gameshank.com/!
Any ideas? Thanks!
When using position:absolute it removes the element from the document flow. The best way to prevent position:absolute elements from overlapping other elements is to use the margin properties to your advantage.
Try adding this to your CSS (differences noted with asterisks so don't add that to the code):
nav {
background-color: #989898;
margin-left: -10%; /**** Remove other margin: 0 -12.5%; */
margin-top: -100px; /*****/
width: 100%; /****/
position: absolute;
z-index: 100;
}
#logo { /**** This is all new. You can change to a different name if you need to.*/
margin-top:100px;
}
Add this to your HTML <center> tag which immediately follows the <center> tag holding the <nav>.
<center id="logo"> ... </center>
On a different note, you should consider doing a significant rewrite of all that code. That site is using depreciated tags such as <center> and <font> for styles that CSS can handle better along side HTML5 elements such as <nav>.
My goal is to make a DIV that presents the latest four news links with the title and a small picture on hover.
The box will be small (150px height by 50px width) and will expand to about 500px. Once an article is clicked, it will bring up a box that you may exit out of. This box will put a dark layer on the rest of the content so that it is focused on by the user.
Anyways... here is my CSS I have currently.
#news {
position: fixed;
top: 250px;
left:0px;
background-color: blue;
min-width: 20px;
max-width: 600px;
height: 200px;
}
#news a {
display: none;
padding-bottom: 5px;
color: white;
}
#news:hover {
display: block;
padding: 0px 10px 0px 0px;
}
#news:hover a {
display: block;
}
My HTML uses the a tag to edit the position, but was wondering if anyone had any suggestions on how to go about making the boxes inside the div look neat and conform to my command?
I think you're looking for something like this:
<div id="news">
<ul id="articles">
<li class="article-item">
<h2>Article 1!</h2>
<p>Here is some text for the article.</p>
</li>
<li class="article-item">
<h2>Article 2!</h2>
<p>Here is some text for the article.</p>
</li>
<li class="article-item">
<h2>Article 3!</h2>
<p>Here is some text for the article.</p>
</li>
</ul>
</div>
Then your styles would be something like this:
.article-item {
ADD STYLES HERE
}
.article-item h1{
ADD STYLES HERE
}
.article-item p{
ADD STYLES HERE
}
Etc...