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.
Related
.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>
I am newbie and I've got a trouble. I have element with four elements and I can't put one on the right side.
My code is here:
<body>
<header>
<div id="topmenu" class="navigation">
<ul class="navul">
<li>FAQ</li>
<li>ABOUT</li>
<li>Next</li>
<li class="rightbutton"><div>Log In/Sign Up</div></li>
</ul>
</div>
</header>
And css is on jfiddle ( I was not able to attach it correctly)
http://jsfiddle.net/EGxWy/2/
Try putting float:right on one li element and display:inline-block on all li elements.
I have a simple horizontal menu. On some of the menu headings, i would like to split them so the text starts on a new line.
HTML:
<ul class="tabs">
<li>
<div class="home">
Home
</div>
</li>
<li>
<div class="contact">
How to
Contact Us
</div>
</li>
<li>
<div class="products">
About Our
Products
</div>
</li>
</ul>
CSS:
.tabs ul {
list-style: none;
}
.tabs li {
display: inline-block;
}
So, what i am trying to do is, rather than appear as About Our Products.. Instead:
About Our
Products
Here's my fiddle: http://jsfiddle.net/oampz/dWbx5/
Ideally without using br
So like I said in the comment, you can maybe use max-width
HERE is a fiddle using it.
EDIT: I added it to the inline CSS, but you can move it into your CSS page.
Simply use a break <br />?
<div class="products">
About Our<br />Products
</div>
I also prefer to use a float: left; on the li instead of inline-block, it's easier (and more logic) to work with:
http://jsfiddle.net/2EDbr/
<div >
About Our
</div>
<div>
Products
</div>
similarly u can use for all
http://jsfiddle.net/dWbx5/4/
Can someone tell me how I can have text in line with five links please in my menu using html and css?
The current code is
<div class="menu content">
<ul id="nav">
<h1>JEWLLERY</h1>
<li>Home
</li>
<li>Jewellery
</li>
<li>Locations
</li>
<li>Contact Us
</li>
<li>Reviews
</li>
</ul>
</div>
<!-- end of menu -->
I want the "JEWELLEY" to be on the left side with the links following, thanks.
The Content is in the menu bar at the top of my website.
I want the menu to appear as
JEWELLERY HOME Jewellery Locations Contact Us Reviews
However at present the links (home, jewellery, locations, contact us, reviews) are displaying below "JEWELLERY"
Thanks.
Try display property
h1, li{
display:inline-block;
}
Fiddle Demo
Another Scenario
In this, you have to pick out <h1>JEWLLERY</h1> from the <ul>
h1{
float:left; // can be replaced by display:inline-block; and vertical-align:top;
}
ul{
display:inline-block;
}
Updated Demo --> http://jsfiddle.net/U2PPu/1/
Note: I'm using both display:inline-block and float:left property just to make you familier with both rules, otherwise display:inline-block is enough.
#nav
{
list-style:none;
}
#nav li
{
float:left;
}
Guys can anyone tell me why I can't remove the list-style-type from the <ul> below using the specificity defined below the html.
<footer><!-- this is where the footer starts-->
<div class="container_12">
<div class="grid_2">
<ul>
<li>
<strong>
test
</strong>
</li>
<li>
Home
</li>
<li>
Why
</li>
<li>
Get Started
</li>
<li>
Customers
</li>
<li>
Careers
</li>
</ul>
footer ul {
list-style-type:none;
margin:0px;
padding: 0px;
}
I've also tried footer div div ul {} but I can't seem to address the ul element.
Css class needs to be called .footer ul {...}, and footer has to actually use it: <footer class="footer"> - because in IE6, and any other browser that doesn't understand HTML5 tags, <footer> is renamed to <div> by whichever solution you are using, so the css selector would not apply any longer...
UPDATE: check in any browser developer tools if anything is overriding your style, or try forcing it with list-style-type: none !important;
Your example definitely references the Unordered List without issue, both examples in fact. Perhaps you have other conflicting styles which are giving you the issue?
To see it working click here. Please notice that I have put a red border around it to help make it clearer.