Having a menu like this (emphasized by a red rectangle)...
how can I (in pure CSS) make this responsive so that, if there is not enough width available, the menu turns into a drop-down list (or anyway something smaller).
The question is not about implementing the drop-down list itself, but how to switch from one content to the other depending on available space.
I know this is rather simple when using #media max-width queries, but the problem is that I do not know the actual with of the menu items at "design time" - especially because the text gets translated and/or changed, leading to different widths depending on the actual language displayed.
Perhaps, there is some CSS trick that makes a whole "text" line / content disappear if it does not fit the parent container?
Here's a solution I've just come up with that should do the job. I added some style to make the structure more evident but it's not pixel perfect, you'll have to take care of that. Run the snippet in full screen and resize the window to see it in action.
.table-row{
display: table-row;
}
.table-cell{
display: table-cell;
vertical-align: middle;
white-space: nowrap;
}
.wrapper{
height:75px; /*the height of your menu, it's critical to define this value equal to the horizontal menu height*/
overflow:hidden; /*this will hide the horizontal menu when the screen width is too small*/
}
.top_nav{
padding-right:120px; /*allow space for right section*/
background-color: green;
color:white;
}
.top_nav_background{ /* this serves as a background for the rest of the structure, pay attention if you have other z-indexed elements */
background-color:green;
height:85px;
width:100%;
position:absolute;
top:0px;
z-index:-1;
}
.floating-box {
height: 55px;
padding:10px;
float: left;
border: 1px solid #73AD21;
background-color:green;
}
.h-menu{
height: 75px;
float: left;
min-width: 150px;
background-color:yellow;
}
.h-menu-item{
height: 55px;
padding:10px;
border: 1px solid #73AD21;
}
.v-menu{
margin-top:20px;
height: 20px;
background-color:red;
}
.right-items{
position:absolute;
right:20px;
top:20px;
color:white;
}
<!DOCTYPE html>
<html>
<head>
</head>
<body>
<div class="top_nav_background"></div>
<div class="top_nav table-cell">
<div class="wrapper">
<div class="floating-box">Left section.</div>
<div class="h-menu table-row">
<div class="table-cell h-menu-item">item1</div>
<div class="table-cell h-menu-item">item2</div>
<div class="table-cell h-menu-item">item3</div>
<div class="table-cell h-menu-item">long long long item4</div>
</div>
<div class="v-menu">v-menu</div>
</div>
<div class="table-cell right-items">Right section.</div>
</div>
</body>
</html>
In one project I did I came up with a solution where you show part or all of the menu and only show it as a dropdown/side-menu when the screen gets smaller.
The sub-menu is optional and you can just use the main menu for your effect.
http://codepen.io/anon/pen/LRJoEB
<nav id="top-menu">
<ul>
<li class="link menu" tabindex="0">
Menu
</li>
<li class="link">
<a class="help" href="#">Help</a>
</li>
<li class="link">
<a class="account" href="#">My Account</a>
</li>
<li class="sub-nav">
<nav id="sub-menu">
<ul>
<li class="sub-link">
<a class="details" href="#">My Details</a>
</li>
</ul>
<div id="close-menu" tabindex="0"></div>
</nav>
</li>
</ul>
</nav>
Just change the bits and parts to fit your needs, should you get stuck just leave a comment ;)
edit
Just realised you don't want to be using any media queries. I'll see if I can come up with something in that direction, not off the top of my head.
Related
I'm not sure what the issue here is, but its frustrating the hell out of me. I have a header div, for the logo and links, a wrapper div for the main section, and then a footer. width is set to 100% for all, but for some reason there is an overflow of white space spilling over on the right side and on the bottom. And it does this funky thing where if I move my mouse to the white space below the footer the contact link in my header is selected!
Theirs a fair bit of html and css so I decided to just link you guys to a jfiddle, it will be easier to just show you the problem in action. notice how you can scroll to the right and there is white space, even though the wrapper has background color set to grey, header has background set to white, and footer has background set to grey. all have 100% widths as well.
There is even white space coming in below the footer for some reason.
I hope all this makes sense and thanks for your help. I'm sure its something silly and obvious but I'm still kind of new to this!
http://jsfiddle.net/46andtool/Q2d4K/2/
heres the main div css
/*body element*/
body {font-size: 100%; line-height: 1; max-width: 100%; font-family: 'Source Sans Pro', sans-serif; }
/*contains #main and #footer*/
#wrapper { width:100%; background-color:grey; border: none;}
#main { width:100%; margin: 0 auto; border: none;}/*main body of website, wrapped inside of the wrapper div*/
/*div that contains the banner and navigation*/
.header {width: 100%; margin: 0 auto; background-color: #FFFFFF; padding-bottom: 10px; margin-bottom: 10px;}
/*Logo*/
#banner {float: left; max-width: 100%; margin: 0; padding: 0;}
/*navigation*/
#w { max-width: 100%; background-color: #FFFFFF; margin: 0; padding: 0; }
and the html:
<body>
<div class="header">
<img id="banner" src="img/******.png" alt="*******">
<div id="w">
<nav>
<ul id="ddmenu">
<li>About
<ul>
<li>Our Mission</li>
<li>The Staff</li>
<li>History</li>
</ul>
</li>
<li>Services
<ul>
<li>*****</li>
<li>******</li>
<li>******</li>
</ul>
</li>
<li>Links
<ul>
<li>China</li>
<li>Japan</li>
<li>Canada</li>
<li>Australia</li>
<li>South America</li>
</ul>
</li>
<li>Contact Us</li>
</ul>
</nav>
</div>
</div>
<div id="wrapper">
<div id="main">
<div id="innermain">
<h1>Latest News and Events</h1>
<h2>Welcome to !</h2>
<p>gsfdgdfgsdfgsdfg
</p>
<div id="linebreak"></div>
<p>gfdhgdfhfgh</p>
<br>
<p>hgdhfghgfh</p>
<br>
<p>gdhfgdhfghfgh</p>
<br>
</div>
<div id="rightside">
<h1>Where To Find Us</h1>
<div id="buildingpic"></div>
<div id="map_canvas"></div>
<p id="location">sadfasdfsadsdf<br> asdfsdfa<br> asdfdsfds<br> 555-3423</p>
</div>
</div>
</div>
<div id="footer">
Site design by <a class ="links" href="example#yahoo.com">fsgfdg</a></a> © <?php echo date('Y');?> All Rights Reserved
</div>
</body>
There are a couple things causing issues here.
Your body automatically comes with a margin, so it's going to overflow if you don't specifically set the margin:0px;
Your #footer had a width:100%; but it also had padding:10px. Those are combined, so you had width:100% + 10px of padding. Try to do something like what I provided, which is width:94%; and padding:10px 3%; so your width becomes 94% + 3% + 3% = 100%
Lastly, your #buildingpic element had width:300px which in this case was wider than the container it was in. You would be better off making it width:100% and height:auto; to automatically constraint to the proportions of it's container. In this case I set the max-width:100%;
http://jsfiddle.net/Q2d4K/4/
Also, you're going to have a hell of a time if you always use IDs. Try to use classes for elements so you can re-use them if need be, or at least not have issues with duplication or priority of selection.
Hi I have a container div for a page (called innercontent) and within that I have a div called tabs2. Tabs2 contains a tabbed navigation that allows content inside a div (within tab2) change. The content inside the div varies, so the height should expand itself if there is a lot of content in that div. The problem is that when changing the tabs in the content area, the div does not resize automatically, so the content cannot be seen. Here is the code:
CSS:
.innercontent {
overflow: hidden;
background-color:#FFF;
padding:24px 30px;
border-radius:5px;
}
#tabs2 {
width: 100%;
height:100%;
}
.div2 {
position: absolute;
visibility: hidden;
width: 100%;
left: 0;
}
HTML:
<div id="tabs2">
<ul>
<li id="One">One
<div class="div2">
<p>Insert content here</p>
</div>
</li>
<li id="Two">Two
<div class="div2">
<p>Insert content here</p>
</div>
</li>
<li id="Three">Three
<div class="div2">
<p>Insert content here</p>
</div>
</li>
</ul>
</div>
Are you sure they have to be absolute? As I don't think they need to be.You could look at using something such as jqueryui http://jqueryui.com/tabs/
Alternatively, amend your html and it should be easier.Essentially move the content divs outside of the but have a data-attribute that links them to a specific link. I'm assuming you use some js at the moment to manipulate showing and hiding as you currently have visibility:hidden. I've changed this to display:none in my example (as visibility still occupies space in the document. When a user clicks a link, hide all the divs by default, then show the one with the correct matching data-attribute.
I've created a fiddle at http://jsfiddle.net/9bH7s/ that shows this and the code is below.
html
<div class="innercontent">
<div id="tabs2">
<ul>
<li id="One">One
</li>
<li id="Two">Two
</li>
<li id="Three">Three
</li>
</ul>
<div class="div2" data-id="first">
<p>Insert content here</p>
</div>
<div class="div2" data-id="sec">
<p>Insert content here</p>
</div>
<div class="div2" data-id="third">
<p>Insert content here this has a lot more <br /><br />and some more content</p>
</div>
</div>
</div>
css
.innercontent {
overflow: hidden;
background-color:#efefef;
padding:24px 30px;
border-radius:5px;
}
#tabs2 {
width: 100%;
height:100%;
}
#tabs2 ul li{
float:left;
list-style:none;
margin-left:10px;
}
.div2 {
display:none;
width: 100%;
clear:both;
}
js
$('#tabs2').delegate('a','click',function(){
$('.div2').hide();
$('.div2[data-id=' + this.id +']').show();
});
1st change::dont indicate any height for .tab2..it will take an automatic height corresponding to the item that it contains
2nd change: you have made position:absolute; and expecting it to be dynamic.how that can be possible.remove it..either make it position:relative; or better choice is not to mention position property at al ...you can use margin-left:100px; to position your div
I want to use a fixed header, with the content behind it. The menu will contain anchor links, so all the content will be in one page.
But, I got stuck at an early stage. I thought this would be no problem, but it seems like the header div is snapped to the content div somehow. It looks like they have the same margin.
If position:fixed; is removed, it looks like it should, but I want it to be fixed.
I really don't understand why this happens, since they're separated from each other. Using something like margin-top:-100px doesn't feel right.
Doing this should work without ugly solutions...
CSS:
#header {
position:fixed;
width:1200px;
border:1px solid black;
z-index:1;
overflow:hidden;
background-color:white;
}
#menu {
width:100%;
z-index:2;
}
#content {
margin: 100px 0 0 0;
background-color:red;
overflow:hidden;
width:1200px;
z-index: -1;
height:100%;
}
HTML
<div id="header">
<h1>Header</h1>
<div id="menu"><ul>
<li>Works</li>
<li>News</li>
<li>About</li>
<li>Contact</li>
</ul>
</div>
</div>
<div id="content">
<div id="works" name="works"></div>
<div id="news" name="news"></div>
<div id="about" name="about"></div>
<div id="contact" name="contact"></div>
</div>
<div id="footer"></div>
Add top: 0px; to your #header class
hello i am make like this example which i get from www.xxxxxx.com
http://s1172.photobucket.com/albums/r568/novikoraharja/?action=view¤t=justanimage.png
i wanted too learn that so can you help me?
<div class="panjang">
<ul>
<li class="bungkus">
<div class="kiri"><img src="http://i1172.photobucket.com/albums/r568/novikoraharja/3.jpg"/> </div>
<div class="kanan">Very loooooong </div>
</li>
<li class="bungkus">
<div class="kiri"><img src="http://i1172.photobucket.com/albums/r568/novikoraharja/3.jpg"/></div>
<div class="kanan">Very loooooong text sooo lonngg </div>
</li>
</ul>
</div>
here the style
.panjang{width:400px;height;100px;}
.bungkus{width:200px; height:50px; background:yellow;}
.bungkus img { width:60px; height:40px; margin:5px 10px;}
.kiri { float:left; background:red; width:80px; height:50px; }
.kanan{vertical-align:middle; background:cyan; float:left;width:120px;height:50px;font-size:12px;vertical-align:middle;
}
here my works http://jsfiddle.net/76E4w/11/
i already add line-align:middle; or line weight but not work;
See working jsFiddle here:
Add display: table; to .bungkus.
Remove float: left; from .kanan.
Add display: table-cell; to .kanan.
When you find a web site doing it as you like,
the easiest thing is to run firefox with firebug
and to look which css applies.
centering could be done in different ways.
one is
text-align: center
An other approach is to set right/left margin to auto
margin: 0 auto;
I'm trying to code more "responsive" after reading Ethan Marcote's A Book Apart.
I have come up with a case which I'm not sure how to solve. In a li element, I have four different divs. The first one cannot change width or height (I know this isn't responsive but the image size must remain the same within it). The other three divs can stretch as they are just text.
Now, I know I can set the divs to have different percentages of their parent width, which is fine, except for the fact that div1 HAS to be a defined pixel width. This throws out the calculations for the other percentages (browser width - 77px is going to be a different number for different browser sizes), so what shall I do?
I've whipped up this to help illustrate my problem.
As I mention, I realise I can use JS to set a container div's width on document load and resize but that seems, well, not so great.
Thanks for any help :)
Maybe table somethings can help
<!DOCTYPE html>
<html>
<head>
<style>
li { display: table; clear: both; width: 100% }
li div { display: table-cell; border: 1px solid blue; height: 1em }
.div1 { min-width: 65px; max-width: 65px }
.div2 { width: 60% }
.div3 { width: 10% }
.div4 { width: 30% }
</style>
</head>
<body>
<ul>
<li>
<div class="div1"></div>
<div class="div2"></div>
<div class="div3"></div>
<div class="div4"></div>
</li>
<li>
<div class="div1"></div>
<div class="div2"></div>
<div class="div3"></div>
<div class="div4"></div>
</li>
</ul>
</body>
</html>
#garthen; As i understand your question is that you want one div have fixed width & other have dynamic widths. I did that by change the order of the divs
CSS:
li {overflow:hidden}
li div {border: 1px solid blue;}
.div1 { width:65px;float:left; background:red;}
.div2 {overflow:hidden; background:yellow;}
.div3 { width: 10%; float:right; background:green;}
.div4 { width: 30% ;float:right; background:pink;}
HTML:
<ul>
<li>
<div class="div1">1</div>
<div class="div4">4</div>
<div class="div3">3</div>
<div class="div2">2</div>
</li>
<li>
<div class="div1">1</div>
<div class="div4">4</div>
<div class="div3">3</div>
<div class="div2">2</div>
</li>
</ul>
may be that's you want & it's also work IE also. If you want to give your 3rd & 4th div fixed width then also works well.
Check the demo for more http://jsfiddle.net/sandeep/4RPFa/67/