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>
Related
I'm making a WordPress website and I created everything outside of it. Now i'm getting it all together but I'm pretty new to this. I would like to create a Wordpress loop to get images from a gallery, replacing the img tag.
------- Edited -------
So there was a small change in the design but same problem. I need to get the images from a gallery in Wordpress to fill two slideshows with the same images.
<div id="slider1">
<ul>
<li class="mySlides1">
<img src="images_1.jpg">
</li>
<li class="mySlides1">
<img src="images_3.jpg">
</li>
<li class="mySlides1">
<img src="images_2.jpg">
</li>
<li class="mySlides1">
<img src="images_4.jpg">
</li>
</ul>
</div>
<div id="slider2">
<ul>
<li class="mySlides2">
<img src="images_1.jpg">
</li>
<li class="mySlides2">
<img src="images_3.jpg">
</li>
<li class="mySlides2">
<img src="images_2.jpg">
</li>
<li class="mySlides2">
<img src="images_4.jpg">
</li>
</ul>
</div>
I edited the question
As the question has been updated, I'm updating my answer to fit the new requirements. Basically, I've just added a parameter to the _GetSSImages() function. This allows you to pull the images from a specific slideshow, assuming that the class="" is unique for each slideshow. If not, then I would need to adjust the structure of the function.
----Original answer with updated code:
There are few things I don't know, such as how you intend to display the list of images from the slideshow, or how the client will edit this list.
However, you can use the javascript function below to grab all of the image src attributes from the slideshow HTML based on what you've shown here. The function returns an array of all src attributes so you can call it wherever you need to in your code to get the list.
function _GetSSImages(slide) {
var slideEls = document.querySelectorAll(slide),
slideImgs = [];
for(var i = 0; i < slideEls.length; i++) {
if(slideEls[i].querySelector("img").src != null) slideImgs.push(slideEls[i].querySelector("img").src);
}
return slideImgs;
}
var slideShow1 = _GetSSImages("mySlides1"),
slideShow2 = _GetSSImages("mySlides2");
<div id="slider1">
<ul>
<li class="mySlides1">
<img src="images_1.jpg">
</li>
<li class="mySlides1">
<img src="images_3.jpg">
</li>
<li class="mySlides1">
<img src="images_2.jpg">
</li>
<li class="mySlides1">
<img src="images_4.jpg">
</li>
</ul>
</div>
<div id="slider2">
<ul>
<li class="mySlides2">
<img src="images_1.jpg">
</li>
<li class="mySlides2">
<img src="images_3.jpg">
</li>
<li class="mySlides2">
<img src="images_2.jpg">
</li>
<li class="mySlides2">
<img src="images_4.jpg">
</li>
</ul>
</div>
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) {
}
This is the a litle piece from a menu:
<li>Some Text
Now I want that after SOME TEXT to be 1 2 3 and when I click 1 2 3 to link me to another link, it has to be inside the >Some Text </a>.
Some ideas?
I'm not sure if that's what you are searching for:
<ul id="mega-menu-1" class="mega-menu">
<li>Products
<ul>
<li>Vehicles
<ul>
<li><a id="in_a_row" href="#">Coupe
<div class="cars">
<a class="car" href="#">1</a>
<a class="car" href="#">2</a>
<a class="car" href="#">3</a>
</div>
</a></li>
</ul>
</li>
</ul>
</li>
</ul>
For styling of the elements you can use this CSS code:
.cars,
.car,
#in_a_row
{
display: inline !important;
}
Use !important to overwrite styles which have been defined by the plugins CSS file.
Here you can grab the source code. Just replace the index.html of the plugin with that code.
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.