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.
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'm trying to set an image as the background but because it's a browser bases editor, I cannot just link the photo as they are not saved together.
<body>
<div id="backG"> <img src="(image link. i didnt add the link here as it is very long) " alt="concert stadium">
</div>
<div id="mainPage">
<div id="navBar">
<div id="Logo">
<h1 style="font-weight:bold;"> Ice Arena
</h1>
</div>
<ul>
<li style="color:#ffe700;">
Home
</li>
<li>
Gallery
</li>
<li>
Order Form
</li>
<li>
The Arena
</li>
<li>
Contact Us
</li>
< /ul>
</div>
</div>
</body>#
here is the CSS for the photo.
#backG{
diplay:block;
border:0;
}
Free Codepen does not let you host your own images, so you have to upload them somewhere else and link to them. A lot of people use dropbox or imgur
for this. Hope this helps!
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) {
}
Here is my code:
<div class="wrap">
<div id ="header">
<a href="index" class = "logo">
<img src = "logo.png" alt = "" />
</a>
<nav class="navigation">
<ul>
<li>Share</li> |
<li>Join</li> |
<li>See Safty Tips</li> |
<li>Settings</li>
</ul>
</nav>
</div>
<div class="wrapper">
<img src="accident.png" alt="">
<div id="right-content">
<h2>Hit and Run No Injuries</h2>
<p>2.610 miles from your new neighbor<br />
May 20, 2015 at 12.34 PM </p>
<h4>California HWP 2 - High Level</h4>
</div>
</div>
<div class="wrap">
<ul class="secure_v5">
<li id="li-incident">
<a class="inviteLink dark" href="/v5/Resources.aspx?IFrameURL=Invitationv5&vn=&gORn=1">See Incident Location</a>
</li>
<li id="login-signup">
<a class="button dark" href="V4/Login.aspx?v5=1">Share Incident with Friends</a>
</li>
</ul>
</div>
<div class="thanks">
<p>Sincerely,<br />
The AlertID Team</p>
</div>
<p style="text-align:center;">This sponsor is helping to protect your neighborhood</p>
<div class="footer-links">
<ul>
<li></li>
<li></li>
<li></li>
</ul>
</div>
</div>
and here is jsfiddle , (didn't include images)
When i run this code, some alignment is not correct,
I need something same like this
I just confused with which exact css can be used, Can anyone help me please?
Thanks,
Use HTML tables to control the design layout and some presentation. You may be used to using pure CSS layouts for your web pages, but that approach just won’t hold up in an email environment.
Use inline CSS to control other presentation elements within your email, such as background colors and fonts.
You just put div #right-content to right
try it on CSS.
#right-content {
float:right;
width:600px;
}
#right-content h2{
text-align:center;
}
I create a little attribute to h2 inside div #right-content
and define a fixed width for right-content. It's necessary because of attribute float: right.
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>