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.
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.
.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>
Sometimes working with wordpress can be a pain. Im trying to style a menu that is generated by wordpress.
here is the basic html
<div class="footer">
<!--Generated By Wordpress-->
<ul class="menu">
<li class="menu-item">
<a></a>
<ul class="sub-menu">
<li class="menu-item">
<a></a>
</li>
</ul>
</li>
</ul>
<!--End Generated-->
</div>
I want to create some CSS to target specifically the <a> within the sub menu, without messing with the <a> in the main menu. Also I cant mess with any other menus I have set up on the site, so this also must be specific to the footer menu.
Would this be the proper method?
.footer .sub-menu a { }
What would be the proper method for this?
Actually you are right the following ways are appropriate:
1
.footer .sub-menu a{}
2
.footer ul.sub-menu a{}
3
ul.sub-menu a{}
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.
Why my a element tag does not effect the links? Right syntax? I have navigation links and for some reason, the css properties does not effect my links in any way, any reason why? I also want the links to effect only inside the id #nav, no other a tags are to be effected as what I'm trying to do.
CSS CODE:
a#nav:link, a#nav:visited, a#nav:active{color:#FFB405;text-decoration:none;font-weight:bold;} /*doesnt work... why?*/
a#nav:hover{background-color:#FFB405;color:#FFFFFF;text-decoration:none;font-weight:bold;}
HTML CODE
<!--NAVIGATION-->
<ul id="nav">
<li>Home</li>
<li>About</li>
<li>Portfolio</li>
<li>Projects</li>
<li>Contact</li>
<li>Class List</li> <!--change URL later-->
</ul>
a#nav is incorrect. Try #nav a. This syntax targets an a that is a descendant of #nav. Your syntax targets an a with id="nav"
Your CSS selectors are wrong. You have
a#nav:link, ...
but it should be
#nav a:link, ...
Try change css to this:
#nav a:link, #nav a:visited, #nav a:active{color:#FFB405;text-decoration:none;font-weight:bold;} /*doesnt work... why?*/
#nav a:hover{background-color:#FFB405;color:#FFFFFF;text-decoration:none;font-weight:bold;}
http://jsfiddle.net/WMLx7/
You have set a#nav and the nav id is set to the parent ul.
Please try ul#nav li a instead.
http://jsfiddle.net/Ek2DT/
Change this
a#nav:link to #nav a:link
When you use this: a#nav it means <a id="nav... but you are having something like:
<ul id="nav">
<li>Home</li>
So use:
#nav a { // and add its properties like link, hover, active!
The main problem you have is that you are using a#nav when it should be #nav a.
nav a references the tag with the id 'nav' and selects all the tags.