The bottom of my page is supposed to have contact information below the bottom navigation bar. For some reason I cannot get this to happen. The contact info goes up above the bottom navigation even though the code has it below.
<footer>
<ul id="nav">
<li>Home
</li>
<li>Bio
</li>
<li>Career
</li>
<li>Links
</li>
<li>Contact
</li>
<li>Hobbies
</li>
</ul>
<br />
<div id="contactinfo">Twin Artesian Stables
<br />2990 Oakdale Dr.,
<br />Suamico, WI
<br />920-865-5555
</div>
</footer>
Make sure if there is positions set in your css for #nav #contactinfo -> has to be
#nav #contactinfo{position:relative}...
Related
I am unable to ascertain what attribute is fixing the width of the navbar, so as to reduce it from the borders. The CSS is too big so I had to use JSfiddle
<nav id="NAV_1">
<ul id="UL_2">
<li id="LI_3">
Home
</li>
<li id="LI_5">
About
</li>
<li id="LI_7">
Blog
</li>
<li id="LI_9">
Freebies
</li>
<li id="LI_11">
Resources
</li>
<li id="LI_13">
Start a Blog
</li>
<li id="LI_15">
Shop
</li>
</ul>
</nav>
Why does #UL_2 have margin: 0px 543.031px;? That's where your whitespace is coming from. Removing the margin is enough to make the navbar display as normal:
http://jsfiddle.net/vicvipe/tbq0nhk1/
Line 83 in the CSS.
margin: 0px 543.031px;
I am very new to this and my code is probably very sloppy, excessive and redundant, so I apologize for that.
I am trying to add one final piece to my nav bar. Here is the HTML, a fiddle will be attached at the bottom.
<body>
<div id="container">
<header class="main-header">
<ul class="main-nav">
<li> <a id="h" href=".html">_______ _______ __________</a> </li>
</ul>
<ul class="second-nav">
<li> <a id="a" href=".html">_____ __</a> </li>
<li class="dropdown"> <a id="p" href=".html">_________</a>
<ul class="drop-nav">
<div class="flyout">
<li> <a id="r" href=".html">___________</a> </li>
<ul class="flyout-nav">
<li> ___ </li>
<li> ______ _ _____ </li>
<li> ______ ________ </li>
</ul>
</div>
<div class="flyout">
<li> <a id="c" href=".html">__________</a> </li>
<ul class="flyout-nav">
<li> ______ ________ </li>
<li> ___________ </li>
<li> ______ _____ </li>
</ul>
</div>
<li> ______ _______ </li>
</ul>
</li>
<li> _______ __ </li>
</ul>
</header>
I am attempting to select the two different "flyout-nav"s individually, however I cannot seem to find the correct specificity to select each individually.
All I need to do is round the top left corner on the second "flyout-nav" while keeping the first "flyout-nav"s top left corner square.
I believe my problem is that when I try to select the first child of the "flyout" is selects both "flyout-nav"s as they are both the first children and I have been looking into nth-children and other child selectors but to no avail. At this point after combing through the code for a few days now attempting to make it more efficient and find an order that will make it work I need some new eyes on the code to see what my eyes have been blinded to.
Here is the Jsfiddle with my css (note css is probably more sloppy than my code, still attempting to figure out the whole organization thing).
Thank you for the assistance and please don't hesitate to ask me to clarify anything.
Fix:
I changed the second "flyout-nav" to "flyout-nav1" and then updated all of the css that was associated with "flyout-nav" to also incorporate "flyout-nav1"
new Jsfiddle here
Your HTML structure is invalid. This is a valid HTML structure.
<!DOCTYPE html>
<head>
<title>Test</title>
</head>
<body>
<div id="container">
<header class="main-header">
<ul class="main-nav">
<li>
<a id="h" href=".html">_______ _______ __________</a>
</li>
</ul>
<ul class="second-nav">
<li>
<a id="a" href=".html">_____ __</a>
</li>
<li class="dropdown"> <a id="p" href=".html">_________</a>
<ul class="drop-nav">
<li class="flyout">
<a id="r" href=".html">___________</a>
<ul class="flyout-nav">
<li>___
</li>
<li>______ _ _____
</li>
<li>______ ________
</li>
</ul>
</li>
<li class="flyout">
<a id="c" href=".html">__________</a>
<ul class="flyout-nav">
<li>______ ________
</li>
<li>___________
</li>
<li>______ _____
</li>
</ul>
</li>
<li>
______ _______
</li>
</ul>
</li>
<li>
_______ __
</li>
</ul>
</header>
</div>
</body>
Then use :nth-child() selector, or add a custom class.
Try out nth-child here:
https://css-tricks.com/examples/nth-child-tester/
Try using the 'adjacent sibling selector' (+):
ul.drop-nav div.flyout + div.flyout ul.flyout-nav {
/* css for the second flyout */
}
JSFiddle Demo
I believe Mr__Goat wants to select the two elements individually so he can apply different styling to each. The following CSS selectors will refer to each element individually.
/* First .flyout-nav */
.drop-nav .flyout-nav:nth-of-type(1) {
}
/* Second .flyout-nav */
.drop-nav .flyout-nav:nth-of-type(2) {
}
I tried to make a footer for a Website im doing for shool. I want to have something like the Impressum on the right and little images for social media on the left. I made it work for the right side but I dont know why the images arent on the right side. I already googled but the things they said didnt worked for me.
JSfiddle demo :
<ul>
<li><a>Irgendwas</a>
</li>
<li><a>Impressum</a>
</li>
<li><a><address>Erstellt von</address></a>
</li>
</ul>
<ul id="socialmediaicons">
<li><a><img src="bilder/icons/facebook.svg" width="30" height="30"></img></a>
</li>
<li><a><img src="bilder/icons/google+-with-circle.svg" width="30" height="30"></img></a>
</li>
</ul>
My suggestion is to just place them outside the footer but I need to have them in there.
If you want the pictures on the left as you mentioned first, add a class to the list items for the socialmedia icons and give it a display: inline-block that should do what you need. If you want them on the right they are there.
.leftFoot {
display: inline-block;
}
<footer id="footer-wrapper">
<ul>
<li><a>Irgendwas</a>
</li>
<li><a>Impressum</a>
</li>
<li><a><address>Erstellt von</address></a>
</li>
</ul>
<ul id="socialmediaicons">
<li class="leftFoot"><a><img src="bilder/icons/facebook.svg" width="30" height="30"></img></a>
</li>
<li class="leftFoot"><a><img src="bilder/icons/google+-with-circle.svg" width="30" height="30"></img></a>
</li>
</ul>
</footer>
You have to put the elements in reverse order when floating "right" things :
demo
<ul id="socialmediaicons">
<li><a><img src="bilder/icons/facebook.svg" width="30" height="30"></img></a>
</li>
<li><a><img src="bilder/icons/google+-with-circle.svg" width="30" height="30"></img></a>
</li>
</ul>
<ul>
<li><a>Irgendwas</a>
</li>
<li><a>Impressum</a>
</li>
<li><a><address>Erstellt von</address></a>
</li>
</ul>
<div class="fbtop">
<img src="https://static.solidshops.com/1441/files/Logo-site.png" title="Pieke Wieke" alt="Pieke Wieke">
<h2 class="title">Zelfgemaakt met liefde</h2>
<ul class="dropdown">
<li>
Naaibenodigdheden
<ul class="sub_menu">
<li>
Allerlei
</li>
<li>
Spelden
</li>
<li>
Naalden
</li>
</ul>
</li>
<li>
Stoffen
<ul class="sub_menu">
<li>
Effen
</li>
<li>
Katoen
<ul>
<li>
Pieke Wieke for Soft Cactus
</li>
<li>
Soft Cactus
</li>
<li>
Bedrukte katoen
</li>
<li>
Basics
</li>
<li>
Stretchkatoen
</li>
</ul>
</li>
<li>
Bedrukt
</li>
<li>
Stretch katoen
</li>
<li>
Tricot
</li>
<li>
Flannel
</li>
<li>
Gabardine
</li>
<li>
Ribfluweel
</li>
<li>
Voering
</li>
<li>
Teddy fleece
</li>
<li>
Geweven
</li>
</ul>
</li>
<li>
Flockfolie
</li>
<li>
Workshops
</li>
<li>
Waardebonnen
</li>
<li>
Vlieseline
</li>
<li>
Fournituren
<ul class="sub_menu">
<li>
Lint
</li>
<li>
Garen
</li>
<li>
Ritsen
</li>
<li>
Paspel
</li>
<li>
Biais
</li>
<li>
Elastiek
</li>
</ul>
</li>
</ul>
</div>
It's a classic way of doing dropdown menu's by css, to see it at work you can go to http://jsfiddle.net/W6Rhe/
There you'll also see the issue that I have with the menu. If you select the first item "Naaibenodigdheden" you'll see that the first sub menu item has front color white instead of red.
If you go to stoffen, you'll notice the same behaviour, if you select the sub menu "katoen" you'll notice the same behaviour again.
Now the cherry on the pie of this delicious issue is that when I adjust all my links to relative links (ie I remove https://blabla.blah.com) then All the items appear in red as intended.
What the hell am I doing wrong? I just don't get it.
ps tested this on chrome
ps2 it appears that when I replace the url in whatever is not what they are now, the problem does not occur, bizar is my only term for this behaviour
This code here:
ul.dropdown li a:visited,
ul.dropdown li a:hover
{
color:#fff;
}
is overriding the color on :visited links to white.
The reason the color changes when you use a relative URL is because the browser no longers sees it as visited, because it is a different path.
I have found the culprit, thanks to Andy for pointing me into the right direction:
ul.dropdown ul li a:hover,
ul.dropdown ul li a:active,
ul.dropdown ul li a:link {color: #e10707; }
He noticed that the links that were still white were in fact links colored trough the :visited attribute that was declared #fff or white :)
There is one state missing in the previous code block, indeed the a:visited color is not set to red, that's why it was white
So I got this header, I want the logo in the middle, and then 2 links on the left and 2 links on the right. I guess I know how to do this but not what the best way is. Got what I think that works below. Edit: Obviously no css applied yet, gotta get the html straight first.
So here's the header
<header>
<div id="head-wrap">
<nav>
<ul>
<li>Smartphones</li>
<li>Tablets</li>
<li>Laptops</li>
<li>Desktops</li>
</ul>
</nav>
</div>
</header>
What might work
<header>
<div id="head-wrap">
<nav>
<div id="nav-left>
<ul>
<li>Smartphones</li>
<li>Tablets</li>
</ul>
</div>
<img src="logo.png" alt="Logo" height="42" width="42">
<div id="nav-right">
<ul>
<li>Laptops</li>
<li>Desktops</li>
</ul>
</div>
</nav>
</div>
</header>
Is this the best way or should I do it differently?
Regards
Your example has a lot of superfluous HTML elements in it. Instead of multiple div containers, try something like this:
<nav>
<ul>
<li>
Smartphones
</li>
<li>
Tablets
</li>
<li>
<img src="logo.png" alt="Logo" height="42" width="42" />
</li>
<li>
Laptops
</li>
<li>
Desktops
</li>
</ul>
</nav>
Then display the li elements inline:
li{
display:inline;
}
Example
Obviously you'll need to edit this more to fit your own needs, but a simple structure is the start of a good design.