I am designing a website, and I want to have a nav bar that resizes to the size of the screen.
This is what I have right now for html:
<nav>
Item 1
Item 2
Item 3
Item 4
</nav>
and css:
nav a {
text-decoration:none;
font-size:2em;
color:#fff;
width:25%;
display:block;
float:left;
background-color:#000;
text-align:center;
}
http://jsfiddle.net/GJVqR/
This works fine until the screen gets down to a certain size at which point I want the menu items to stack on top of each other.
Is there a way to do this without resorting to JS?
EDIT: After receiving a few answers I feel I need to clarify: http://i.stack.imgur.com/9ID5N.png
This is what I am looking for when the screen gets too small.
Set the
min-width
CSS property:
nav a {
min-width: 100px;
text-decoration:none;
font-size:2em;
color:#fff;
width:25%;
display:block;
float:left;
background-color:#000;
text-align:center;
}
You may use min-width instead width, and have them float or not :
http://jsfiddle.net/GJVqR/2/ http://jsfiddle.net/GJVqR/3/
nav a {
text-decoration:none;
font-size:2em;
color:#fff;
min-width:25%;
display:inline-block;
float:left;
background-color:#000;
text-align:center;
}
I found a solution using the #media css
#media (max-width:21.5em){
nav a {
width:100%
}
}
http://jsfiddle.net/GJVqR/4/
Related
I'm doing a good job in styling the mobile menu for the client website but have some coding issue that trying to bring logo section and hamburger button behind the mobile menu.
So when the user clicks on hamburger button they not going to see the logo section and hamburger button.
So I already did a z-index but don't work. Here a link to a site so re-size your screen to see the menu and don't have any javascript & jquery add to site at the moment.
Site Preview:
https://brandonpowell.github.io/alegacyleftbehind/
#media (max-width: 480px){
nav{
height:100%;
width:100%
}
nav .bottom-navbar{
background-color:#212121
}
nav .bottom-navbar .logo{
position:absolute
}
nav .bottom-navbar .bt-close{
position:absolute;
background-color:#51237f;
padding:9px;
display:block;
top:0;
width:100%
}
nav .bottom-navbar .bt-close .close-image{
width:50px;
padding:10px;
float:right;
}
nav .bottom-navbar .bt-close .main-title{
color:white;
padding:20px 10px;
text-transform:uppercase;
font-size:13pt;font-family:Montserrat,sans-serif;
letter-spacing:1px
}
nav .bottom-navbar .nav-menu{
display:block;width:34px;margin:36px;float:right
}
nav ul li{
float:none;
display:block;
letter-spacing:1px;
padding:1.9em 15px;
border-bottom:2px solid #2e2e2e;width:100%
}
nav ul li a{
color:white;
font-size:1.6em
}
li:hover{
background-color:#2e2e2e;
text-decoration:none;
color:#ffffff
}
ul{
padding-left:0px;
margin:0;
}
}
Have you considered changing their opacity to 0 and setting their pointer events to none instead of attempting to hide them behind the menu?
Visually it will have the same effect, and can be triggered with jQuery by adding a class to both. The CSS code for that class could be:
.hidestuff{
opacity:0;
pointer-events:none;
}
Once you remove this class they will go back to being visible and clickable. This has the added benefit of allowing for them to fade in and out using CSS transitions.
Andy
Trying to vertically align text for the buttons in the middle, however i want entire button are to be a link (not just text) so i stretched the anchor tag, now i cannot vertically align text anymore even if i wrap it in another tag still does not work for some reason.
* {
margin:0;
padding:0;
}
hr {
border:0;
height:1px;
background-color:#000000;
}
ul {
border-spacing:15px;
width:100%;
display:table;
}
li {
display:table-cell;
background-color:#ccc;
height:75px;
text-align:center;
}
a {
width:100%;
height:100%;
display:block;
background-color:#FCF;
text-decoration:none;
opacity:0.5;
}
<ul>
<li>
HOME
</li>
<li>
ABOUT
</li>
<li>
ABOUT<HR/>US
</li>
<li>
NEW<hr/>EVENTS
</li>
</ul>
Key points:
I like to keep buttons auto stretch to the page width like it is now.
I like to have entire button area to be click able not just text.
I like to keep unordered list for menu structure as its semantically correct for menu
http://jsfiddle.net/vWrE8/
Final Result Should look like this http://i.stack.imgur.com/kKEc8.png
In my opinion wrapping text inside anchor tag with div is a way to go and then valign-middle, however i cannot make it work.
Here is one solution that may work for you:
Demo Fiddle
You need to remove the disiplay:block from the anchor tags, and vertically align them throught he li element.
CSS
li {
// other styles here
vertical-align: middle;
background-color:#FCF; //<-move the bg to here
}
a {
// other styles here
// display:block;
// background-color:#ccc;
}
I don't think this is achievable without wrapping the multi-line texts in another element, but once that's done, it's quite straightforward. Assuming that wrapper element is a div, just add
a div {
display:inline-block;
width:100%;
vertical-align:middle;
}
a:before {
content:'';
height:100%;
display:inline-block;
vertical-align:middle;
}
As per http://jsfiddle.net/vWrE8/9/
BadAdviceGuy's solution is good, but given you want whole block to be clickable, you can try fluid padding for the anchor tags. Fiddle
CSS:
a {
width:100%;
height:100%;
display:block;
padding: 50% 0;
text-decoration:none;
opacity:0.5;
}
This is as close as I can get to what you want: http://jsfiddle.net/vWrE8/6/
Only works for one line break, after that it falls apart... =/
* {
margin:0;
padding:0;
}
hr {
border:0;
height:1px;
background-color:#000000;
}
ul {
width:100%;
list-style:none;
}
li {
display:inline-block;
vertical-align:top;
background-color:#ccc;
min-width:110px;
height:75px;
text-align:center;
margin:0px 10px;
}
a {
height:100%;
display:block;
background-color:#FCF;
text-decoration:none;
opacity:0.5;
line-height:2em;
}
a span {
position:relative;
display:block;
line-height:1em;
top:30%;
}
<ul>
<li> <span>HOME<span></li>
<li><span>ABOUT<span></li>
<li><span>ABOUT <HR/>US<span></li>
<li><span>NEW <HR/>EVENTS<span></li>
</ul>
I have an unordered list used for navigation tabs. I want them to have space between them but I also want the beginning of the list to line up with the rest of the text to the left.
I know this is simple but I can't figure it out.
http://jsfiddle.net/29g9S/3/
<body>
<div class="page-box">
<p>I am trying to get the ul's li's to line up with the "My Blog" text and still flow with the document</p>
<h1>My Blog</h1>
<ul>
<li>test</li>
<li>test</li>
<li>test</li>
</ul>
</div>
</body>
CSS
.page-box{
position:relative;
left:50px;
}
ul{
position:relative;
left:0px;
}
ul>li{
float:left;
position:relative;
margin-left:100px;
list-style-type:none;
}
The key is killing the margin / padding on the ul:
.page-box{
position:relative;
left:50px;
}
ul{
position:relative;
margin:0;
padding:0;
}
ul>li{
display:inline-block;
position:relative;
margin:0 100px 0 0;
list-style-type:none;
}
Here is an updated jsFiddle. Notice the use of display:inline-block; instead of float:left;. Floats are a one way ticket to old webville! Embrace the wonder that is display:inline-block! :D
If i understood correctly css can be modified as follows,
http://jsfiddle.net/fTdHH/
ul{
position:relative;
left:0px;
padding:0px;
}
ul>li{
float:left;
position:relative;
/* margin-left:100px; */
margin-right:100px;
list-style-type:none;
}
Set
ul {
margin: 0;
padding: 0;
}
ul>li {
// no margin-left
margin-right: 100px;
}
http://jsfiddle.net/beautifulcoder/29g9S/8/
PlantTheldea is right about the margin/padding on the ul. If you want to keep the list items floated with margin-left, just remove the margin-left from the first list-item by using li:first-child:
.page-box {
position:relative;
left:50px;
}
ul {
margin:0;
padding:0;
position:relative;
left:0px;
}
ul>li {
float:left;
position:relative;
margin-left:100px;
list-style-type:none;
}
ul>li:first-child {
margin-left:0;
}
Also, is there are reason you're using position:relative on everything rather than just adding margin or padding to .page-box?
I'm currently having problems with resizing the window which cuts off a lot of the page and the elements which are positioned relatively to the document fly off the page.
Heres what it looks like:
Normal: http://i.imgur.com/KpnUOwI.png
Minimized: http://i.imgur.com/CfCrmub.png
scrolled to the end while minimized: http://i.imgur.com/p8dwiP9.png
I either want the blue elements to go right to end even if it's minimized (It's width:100%) or have the elements resize proportionally to the window and fit everything in (everything is positioned relatively to the document)
css:
body {
margin:0;
padding:0;
height:100%;
width:100%;
position:relative;
overflow:auto;
}
#headr {
background-image:url(../images/top%20bg.jpg);
background-repeat:no-repeat;
height:400px;
width:100%;
position:relative;
z-index:-100;
overflow:hidden;
}
#lgo {
position:relative;
margin-left:33%;
margin-top:80px;
}
#nav {
background-image:url(../images/nav%20bar.png);
position:relative;
top:0;
margin-top:0px;
width:100%;
width:!important;
height:99px;
}
#listone {
list-style-type:none;
display:inline;
margin-left:570px;
top:25px;
position:relative;
overflow:hidden;
}
.navlist {
display:inline;
font-size:33px;
padding:25px;
color:#FFF;
font-weight:bold;
font-family:Verdana, Geneva, sans-serif;
position:static;
}
#searchb {
background-image:url(../images/search.png);
background-repeat:no-repeat;
width:500px;
height:200px;
position:relative;
padding:0px;
margin-left:1350px;
margin-top:-85px;
}
#searchb form {
display:inline;
}
#searchbar {
background-color:transparent;
border:0px;
position:absolute;
top:50px;
left:60px;
width:200px;
height:80px;
outline:none;
font-size:24px;
}
.searchsubmit {
border:0px;
background-color:transparent;
position:absolute;
top:70px;
left:400px;
width:30px;
height:50px;
}
Html:
<body>
<div id="nav">
<ul id="listone">
<li class="navlist">Home</li>
<li class="navlist">Portfolio</li>
<li class="navlist">Prices</li>
<li class="navlist">Contact</li>
</ul>
<div id="searchb">
<form>
<input type="text" id="searchbar" placeholder="Search">
<input type="image" class="searchsubmit" src="images/searchicon.png" value="">
</form></div>
</div>
</div>
<div id="headr">
<!--<img src="images/head logo.png" id="lgo"> -->
</div>
#Joe - I guess you're looking a responsive design. I'd suggest you to get along with Twitter Bootstrap 3. CSS Framework that takes care of the window size. You just need to make some div classes to make it responsive.
Getting along with framework will make it easier and faster for your develop the page and Twitter Bootstrap 3 does it for us.
Here's another post where the same answer's been given.
Yes you would have to sepcifiy for each size you want, you would than write the css for the under media like you would any other css file. Here is an example
/*if the width is over 768px the background will turn blue*/
#media screen and (min-width: 769px) {
body {
background:blue;
}
}
/*if the width is under 768px the background will turn yellow*/
#media screen and (max-width: 769px){
body {
background:yellow;
}
}
You only have to rewrite the properties that tou wish to change at each breakpoint. The cascading properties of CSS are important here, so you shuld pay attention to specificity and order of your selectors so as to achieve the expected result being DRY.
If you really want to support multiple screensizes you should take a look at responsive webdesign. Substituting your px to em is one example of what you wolud be doing.
I'm designing a fairly simple web site but as I don't have much experience I have a very simple question.
I've done the layout in a way that displays all the necessary information without the need of scrolling down. But for some reason it's there.
The site's css is as following:
#charset "utf-8";
/* CSS Document */
html {height:100%;width:100%; margin:0;}
body{
height:65%;
font-size:100%;
font-family:Calibri;
background-image:url(/images/gradient.png);
background-repeat:repeat-x;
background-color:#FFF0;
color:#00080;
margin-left:15%;
margin-top:3%;
margin-right:15%;
width:65%;
}
#banner {
height:40%;
background: url(/images/banner.jpg) right scroll no-repeat;
}
#left_container{
width:20%;
height:80%;
}
#left_container img{
width:100%;
}
a{
text-decoration:none;
color:#FFF;
border:none;
}
#menu{
width:100%;
height:85%;
font-size:120%;
}
#menu td{
background:#999;
color:#FFF;
padding:4%;
}
#menu tr td a:hover{
background:#CCC;
color:#333;
}
#right_container{
width:75%;
height:auto;
position:relative;
left:+26%;
top:-80%;
}
#right_container h2{
font-size:300%;
}
#right_container h3{
font-size:200%;
}
But the web site looks like this (and the scroll appears when I set the right_container h2 title (home) size in the css bigger than 190%....but I need it to be as I set...or it will be to small).How can I remove the scroll bar?
image -> http://i29.tinypic.com/hx3uy8.jpg
You can control the appearance of scrollbars in CSS by using the Overflow property. So you could try adding overflow: hidden to your BODY CSS declaration and see if that helps.