.container {width: 100%;}
.nav h1 {float: left;}
.nav ul {float: right;}
.nav li {display: inline-block;}
<div class="nav">
<div class="container">
<h1>.nav h1 Resume</h1>
<ul>
<li>.nav ul .nav li Home ul li</li>
<li>Portfolio ul li</li>
<li>Skills ul li</li>
<li>Experience ul li</li>
<li>Contact ul li</li>
</ul>
</div>
</div>
<div class="slider">
<h2>div.slider h2 Text Testingx</h2>
<p>Web designer & Developement</p>
<p>Read less DO more</p>
<p>HTML</p>
<p>css</p>
<h3>I design and develop amazing websites that are sleek,
easy-to-navigate and exiting to use.</h3>
<p>Work with us to plan your digital marketing mix and achieve better results online.</p>
</div>
this is clearly a different question. The first was asking how to remove the overlap. Here, I am asking why after giving a width of 100% to an element, it still allows other elements to enter its space; this was not even remotely approached on the last question
I do not wish for a solution but rather a detailed explanation, so I can understand what is happening for myself and be better educated to resolve issues for myself in the future; I'm just trying to learn the theory, this is not a live project as such.
I do not understand what is happening here. I am trying to create a navigational bar but my div class="slider" keeps imposing on my div class="nav". In order to resolve this, I have created a container class for my "nav" elements, and give this 100% of the width. My understanding, was that by giving these elements 100% of the width there would be no 'free' space for anything else to enter. This is obviously not the case, would somebody be kind enough to explain why?
you have used float:left and float:right....that's why the nav h1and nav ul is out of document flow it mean other element will not consider them(as they don't exist). so the height of nav is 0 that's why the slider div is going up.
if you want solution read about css clear property
.container {width: 100%;}
.nav h1 {float: left;}
.nav ul {float: right;}
.nav li {display: inline-block;}
<div class="nav">
<div class="container">
<h1>.nav h1 Resume</h1>
<ul>
<li>.nav ul .nav li Home ul li</li>
<li>Portfolio ul li</li>
<li>Skills ul li</li>
<li>Experience ul li</li>
<li>Contact ul li</li>
</ul>
</div>
</div>
<div class="slider">
<h2>div.slider h2 Text Testingx</h2>
<p>Web designer & Developement</p>
<p>Read less DO more</p>
<p>HTML</p>
<p>css</p>
<h3>I design and develop amazing websites that are sleek,
easy-to-navigate and exiting to use.</h3>
<p>Work with us to plan your digital marketing mix and achieve better results online.</p>
</div>
Related
I have the following HTML code withe the complete code here
<div id="header">
<a href="index.html" id="logo">
<h1 class="headings">THE 100 DAYS PROJECT</h1>
</a>
<nav>
<ul>
<li>Portfolio</li>
<li>About</li>
<li>Contact</li>
</ul>
</nav>
</div>
<div id="contact_container">
<h3>General Informations</h3>
<p>I am not currently looking for new design work, but I am available for speaking gigas and similar engagaments. If you have any questions, please don't hesitate to contact me!</p>
<p>Please only use phone contact for urgent inquiries. Otherwise, twitter and email are the best way to reach me.</p>
<h3>Contact info</h3>
<ul class="contact_info">
<li>Phone</li>
<li>Email</li>
<li>Blog</li>
</ul>
Although I haven't specified any styling for the list in the contact section, the bullets do not show up and the items are displayed in-line. From what I've seen, the line of code which affects this is:
#header ul, li {
display: inline-block;
}
Why is this happening? I want my un ordered list in the contact section to display with bullets and have the items on different lines. Thx!
Because #header ul, li means #header ul or li, not #header ul or #header li.
Instead, write the selector as #header ul, #header li.
I have issue in css syntax .
<div class="demo">
<p>This is stackoverflow</p>
<ul>
<li>first</li>
<li>sec</li>
</ul>
</div>
Then how I should apply more than one css in each p and ul .
Not sure I'm really understanding your question..
HTML
<div class="demo">
<p>This is stackoverflow</p>
<ul>
<li>first</li>
<li>sec</li>
</ul>
</div>
These would let your target the p and ul seperately, applying whatever rules you want to them.
CSS
div.demo p{
color:red;
}
div.demo ul{
color:blue;
}
If you wanted to add more classes, you could do something like this
HTML
<div class="demo">
<p class="paragraph">This is stackoverflow</p>
<ul class="list">
<li>first</li>
<li>sec</li>
</ul>
</div>
These would let your target the p and ul at the same time, applying whatever rules you want to them.
CSS
.paragraph, .list {
color:green ;
}
You could also combine the two, and rather than add new classes, just specify that you want to apply the rules to both.
HTML
<div class="demo">
<p>This is stackoverflow</p>
<ul>
<li>first</li>
<li>sec</li>
</ul>
</div>
These would let your target the p and ul at the same time, applying whatever rules you want to them.
CSS
div.demo p, div.demo ul{
color:purple;
}
There are tons of ways to do things; if you could add more detail to your question we'd be able to help you better.
I'm making use of ul's inside of li tags
<ul>
<li>
<ul>
<li>..</li>
</ul>
</li>
</ul>
And my question is, how can I avoid the inner ul finding itself automatically rendered slightly pushed to the right hand side (what would seem to a be a default accordeon "styling")? without playing around with negative margins.
Further #Vucko comment
ul ul {
padding-left:0;
}
<ul>
<li>
Text
<ul>
<li>..</li>
</ul>
</li>
</ul>
I am try to make drop down menu but i don't know why when ul hover than drop down li not appear correctly i have use z-index and also use position relative.Please check this on top menu.
Css
#menu > ul > li:hover ul {
display:inline;
}
#menu ul li ul{
position:relative;
display:none;
list-style: none;
margin:0px;
width:200px;
z-index:1000;}
Html
<div id="menu">
<div class="home-icn">
<i class="icon-home"></i>
</div>
<ul >
<li><a id="print_menu" href="">Printing</a>
<ul id="drop_menu_f">
<li><a>Business Cards</a></li>
<li><a>Brochure</a></li>
<li><a>Door Hangers</a></li>
<li><a>Envelopes</a></li>
<li><a>Flyers</a></li>
<li><a>Invoice Books</a></li>
<li><a>Magnet Cards</a></li>
<li><a>Note Pads</a></li>
<li><a>Post Cards</a></li>
<li><a>Plastic Cards</a></li>
<li><a>Posters</a></li>
<li><a>Presentation Folders</a></li>
</ul>
</li>
</ul>
</div>
http://jsfiddle.net/hnTyB/1/
<div id="menu">
<ul>
<li>My Menu
<ul>
<li>thing</li>
<li>thing2</li>
</ul>
</li>
</ul>
</div>
I made a js fiddle of what it appears you are trying to do. Copying your css exactly, this seems to work for me. Could it be your html and css don't correctly match?
I checked out your site soniprinting.com (saw the URL in your screenshot) and it looks like you are missing a z-index from your #menu ul.
Add a z-index greater than those of the slideshow, and you should be able to see your dropdown just fine.
I have a problem in my webpage designing in css. I have this code of structure.
<div id="tabs">
<ul>
<li></li>
... other menu ...
</ul>
<div id="content">
... some codes ...
<section class="slider">
<div class="flexslider">
<ul class="slides">
<li>
<img src="image/1.jpg" />
</li>
... other image ...
</ul>
</div>
</slider>
</div>
</div>
in #tabs it use the css of #tab ul{} for the design of the navigation bar menu for the ul and li.
when I apply the flexslider in my page, the flexslider's ul and li were also infected with the css design of #tab ul and #tab li.
is there any way that the flexslider's ul and li will not be infected by #tab ul and #tab li?
by the way, I cannot change the structure of the page because it will affect the other pages. I can only edit in the content div.
You can have separate rules for
#tabs > ul
and
.flexslider > ul
Those rules won't propagate to ul deeper in the tree.
add .flexsider ul and .flexsider ul li with !important at end.