I need to align my banner with the buttons, banner size is w:967 h:106, tried to directly add the image but it pushes all the buttons to the right.
This is what my code looks like so far:
HTML
<nav>
<img src="png"/>
<ul class="fancyNav">
<li id="home">Home</li>
<li id="s">Social</li>
<li id="p">Political</li>
</ul>
</nav>
CSS
.fancyNav{
overflow: hidden;
display: inline-block;
position: absolute;
text-align: center;
top: 16%;
margin-left: 170px;
}
Site link: http://mops.pcriot.com/main.html
This is caused by display: inline-block; which behaves like this:
Displays an element as an inline-level block container.
The inside of this block is formatted as block-level box,
and the element itself is formatted as an inline-level box.
Using display: block will solve this, but then you may need to do more to align the navigation. Anything with inline in it, will cause what you're seeing.
Here are your other options for the display: property:
http://www.w3schools.com/cssref/pr_class_display.asp
.fancNav {
top: 110px;
}
adjust 110 to whatever looks best
make some changes in your class
.fancyNav {
overflow: hidden;
display: inline-block;
text-align: center;
top: 16%;
margin-left: 170px;
width: 100%;
}
Left Aligned - Try removing:
.fancyNav {
margin-left: 170px;
}
Then add:
.fancyNav {
padding: 0;
}
Center Aligned - Do as above then add:
nav {
margin-left: 170px;
}
or instead (probably better):
nav {
width: 967px;
margin: 0 auto;
}
Related
I have this site here: http://dev.jmret.com/index.php but i have a problem on the content page i have two <li> underneath each other and one floating next to it. But it only floats next to the second. How would i make i float next to the first <li>?
So it looks something like this.
CSS (what i am using currently):
.sub-info {
display: inline-block;
position: relative;
width: 67%;
margin-bottom: 25px;
margin-right: 1%;
padding-left: 3%;
float: none;
}
.sub-info2 {
display: inline-block;
position: relative;
width: 26%;
margin-bottom: 25px;
/* margin-right: 1%; */
float: left;
/* padding-right: 5%; */
padding-left: 1%;
}
So what i need to do is make it so that the 3 <li> stack correctly, how can i make this happen in css?
Many thanks
You have to wrap your ul into a div, and then make it float next to it. First change the css to this :
.sub-info {
display: inline;
position: relative;
width: 95%;
margin-bottom: 25px;
margin-right: 1%;
padding-left: 3%;
float: left;
}
then in your li.body-section, wrap the two first ul's into a div and leave the last ul outside like this :
<div class="wrapper">
<ul></ul>
<ul></ul>
</div>
<ul></ul>
and add the css :
.wrapper {
float : left;
}
I believe you wanted something like this :
This is because your ul containing the right column has display: block;.
Change to display: inline-block; on the ul containing .sub-info2 and remove the width on .sub-info2.
Like this (inline styling, but you'll get the point):
<ul style="display: inline-block;">
<li class="sub-info2" style="width: auto">
<ul>
<li class="text tablet">
vertical-align has always given me problems in the past and once again I'm met with a problem that I don't know how to solve.
I have this html:
<ul id="council-slider">
<li class="col-md-12" style="display: block">
<img src="somesource" />
<div class="council-spacer"></div>
<p>text content goes here</p>
</li>
</ul>
CSS:
#council-slider {
margin: 0 auto;
list-style: none;
min-height: 300px;
max-height: 400px;
}
#council-slider li img {
float: left;
height: auto;
width: 25%;
margin: 5px;
}
.council-spacer {
height: 300px;
width: 100px;
float: left;
}
#council-slider li p {
margin-top: 100px;
}
I want to be able to vertically align the image in the middle. The text is multiple lines that wrapped so using line-height will not work in this situation. Also the images can have varying heights.
There are multiple list items; I just used one in the example to simplify and reduce the html.
You should read up on where the vertical-align property has the ability to be applied.
Quoting from MDN: https://developer.mozilla.org/en-US/docs/Web/CSS/vertical-align
The vertical-align CSS property specifies the vertical alignment of an inline or table-cell box.
Since your element is not being displayed as either inline or table-cell vertical-align: middle; will not do you any good here.
You can, however, set your <div> styling to display: table-cell; and then vertical-align: middle
Alternatively, this can be achieved with CSS3 as hars pointed out, just make sure your user's browsers support CSS3
.valign-middle {
position: relative;
top: 50%;
Transform: translateY (-50%);
}
The way this works -
Set position relative to the parent/container (i.e. <li> in your case)
Move the image that you want to vertically align, down 50% of the container height
Move the image up 50% of the height of the image
Add a class to your img as below.
.verticallyCenter {
position: relative;
top:50%;
Transform:translateY (-50%);}
Refer This
Without seeing your actual css code it is hard to say, but you should use vertical-align: middle for all objects that you want to align and you may need to change the display of your paragraph to display: table-cell.
Will be easier using flexbox: display: flex; and align-items: center;
Demo
#council-slider {
list-style: none;
}
#council-slider li{
display: flex;
margin: 10px 0;
align-items: center;
}
.council-spacer {
width: 20px;
}
How can I center this navbar horizontal and vertical?
Here is a screenshot of my navigation bar: http://puu.sh/7luYN
HTML code
<div class="content">
<div class="nav">
<ul>
<li>Startseite</li>
<li>Leistungen</li>
<li>Referenzen</li>
<li>Kontakt</li>
</ul>
</div>
</div>
CSS code
.nav {
background-color: #CCCCCC;
font-family: 'Source Sans Pro', sans-serif;
height: 45px;
padding-left: 170px;
}
.content {
width: 800px;
height: 500px;
margin:0 auto;
}
.nav ul li {
list-style-type: none;
text-align: center;
width: auto;
float: left;
padding-left: 10px;
padding-right: 10px;
margin:0 auto;
}
.nav a {
display: block;
padding-top: 2px;
padding-bottom: 2px;
color: #000000;
text-decoration: none;
}
I already got it to center it horizontal but how can I center it vertical?
I hope for your answers,
Thanks Felix
Here is a PEN I created for a similar answer. There are 3 ways to vertically align your content. The best suited here, according to me will be the line height method.
There are multiple ways to do it, see the following article: http://phrogz.net/CSS/vertical-align/
My favorite way is to use display: table; (on container) and display: table-cell combined with vertical-align: middle (on items itself) as shown in this fiddle:
http://jsfiddle.net/G6vxs/
If you want to use only css, you need to set it with position absolute, top and left to 50% and set the margin-top and margin-left to -height/2 and -width/2.
position: absolute;
top: 50%;
left: 50%;
height: 45px;
margin-top: -22.5px;
width: 440px;
margin-left: -220px;
http://jsbin.com/galapudo/1/edit?html,output
If you want to put centered vertical/horizontal inside other div, set that div with position:relative;
I hope that this helps you.
Single-line approximation for a vertical align : .nav {margin-top : 45%;}
(I wanted to add this as a comment for Daniel Rogi's answer, but I haven't enough reputation points...)
The html
<div class="wrapContent">
<ul>
<li>Lorem</li>
<li>Lorem</li>
<li>Lorem</li>
</ul>
</div>
.wrapper is a fluid div, I am trying to center the floated left lists on the page. Basically be able to have same distances left/right for the first and last li in the ul.
Currently I do:
.wrapContent {
width: 100%;
margin: 0 auto;
}
.ul {
width: 100%;
margin: 0 auto;
}
.li {
width: 250px;
margin: 0 auto;
float: left;
}
Don't float them. (That's kind of an important detail you should've included in your question... :)) Use display instead.
ul {
text-align: center;
}
li {
display: inline-block;
text-align: left; /* optional */
}
Now the lis will each act like inline elements, but preserve the structure of their contents, and you can center them like anything else.
By the way, you don't need to use width: 100%; on block elements; they automatically expand to fit the width of their container.
I have gotten the assignment to code a website from tables to CSS. While this is easy I have one question on how to recreate one of the site's biggest detail.
Site is: www.optimizer.dk.
How can I recreate the labels coming out of the left side, while still having the content in the middle?
Rest of the site is no worries.
Is the solution to:
padding-left: 200000px;
margin-left: -200000px;
To fake the expansion to the left?
I would possibly do it like this:
Live Demo
CSS:
html, body {
margin: 0;
padding: 0;
border: 0;
overflow-x: hidden
}
body {
background: #eee
}
#container {
width: 300px;
margin: 0 auto;
background: #bbb;
}
li, li span {
height: 25px;
}
li {
position: relative;
width: 200px;
background: #777
}
li span {
display: block;
position: absolute;
width: 9999px;
left: -9999px;
top: 0;
background: url(http://dummyimage.com/50x30/f0f/fff)
}
HTML:
<div id="container">
<ul>
<li><span></span>Menu Item</li>
</ul>
<div id="content">
Hi!
</div>
</div>
This answer was based on an older answer I wrote: 'Stretching' a div to the edge of a browser
Ideally here you would want a fluid width. See: http://jsfiddle.net/cbNvn/1/
<div id="left">Left</div>
<div id="center">Center</div>
<div id="right">Right</div>
div {
float: left;
}
#left {
width: 25%;
text-align: right;
}
#center {
width: 50%;
}
#right {
width: 25%;
}
Expanding the page would expand the left column and the background image can repeat. The linked images can lay over the background as they do currently. The text-align:right attribute will keep the linked images on the right.
You need 3 divs with float:left to create the 3 columns
i would put it all in a div and set position:absolute;. then put your buttons in there own divs so you can move them.
or
put it all in a div and set the margin to -5%(mite need to play with this into it works). then make the image the background and put you text buttons in there own div's so you can move then to where you want them.
Then use float:left; to line them up