I'm stuck and can't figure out a fix to my current problem and was hoping to get some help and/or direction.
I was wondering if there is a way to combine the :hover and :nth-child(4n+4) pseudo classes. If you visit my sandbox page there is an un-ordered list (the deal polaroids) where I have every 4th list item display a zero margin. The problem is that the :hover adds a 10px padding that breaks the flow on every 4th list item. I can't seem to figure out how to prevent the flicker that is caused by hovering over those list items. I tried combining things to no avail and using "!important" (which I try and avoid). Can anyone help? I that I'm overlooking something and a second pair of eyes would help.
here is the CSS/HTML:
CSS:
ul#myTiks li {
float: left;
width: 230px;
display: block;
margin-right: 35px;
list-style-type: none;
margin-bottom: 35px;
color: #333;
}
ul#myTiks li:hover {
padding: 10px;
background-image: url(../img/dwt/white_bgd_30.png);
margin: -10px 25px 25px -10px;
-webkit-border-radius: 10px;
-moz-border-radius: 10px;
border-radius: 10px;
}
ul#myTiks li:nth-child(4n+4) {
margin-right: 0 !important;
}
HTML:
<li>
<div class="polaroid">
<div class="title">Title Of Deal</div>
<div class="category">Deal Category</div>
<div class="tik"></div>
<div class="img"><img src="../img/dwt/myTik_placeholder_img.png" width="197" height="197"></div>
<div class="soc" style="display:none;">
<img src="../img/dwt/tweet_btn_x20h.png" width="55" height="20">
<img src="../img/dwt/fb_like_btn_x20h.png" width="46" height="20">
<img src="../img/dwt/pin_btn_x20h.png" width="55" height="20">
</div>
</div>
</li>
Just change your right margin to -10px, no need for important:
ul#myTiks li:nth-child(4n+4) {
margin-right: -10px;
}
Related
I am trying out "flex" with CSS.
I cannot get my nav bar to move to the right. I have tried for hours using margin, changing displays, using float. It won't move passed the middle... Sorry i'm still learning
I have pasted a link to my codepen to show you a better picture:
https://codepen.io/Saharalara/pen/pGyQWZ
The HTML
<div id="page-wrapper">
<header>
<div class="logo">
<img id="header-img" src="https://upload.wikimedia.org/" alt="Minnie Pic">
<span id="logo-name">Minnie & Friends Inc</span>
</div>
<nav id="nav-bar">
<ul id="nav-ul">
<li class="nav-link">Stories<li>
<li class="nav-link">Toys<li>
<li class="nav-link">Suscribe</li>
</ul>
</nav>
</header>
<body>
<container id="container1">
<section>
<h1 id="stories">Minnie & Friends Stories</h1>
<p>
Here you will find all of the best Minnie & Friends toys
and stories.
Choose from a huge variety of stories and the happy gang and they go on
many adventures.
</p>
<section>
<iframe id="video" height="180" src="https://www.youtube.com/watch?
v=crJ1CwD_TX0" frameborder="1" allowfullscreen ></iframe>
</section>
<h2 id="toys">Minnie & Friends Toys</h2>
<p>
Here you will also find many of your favourite characters
to choose from and order to arrive at your doorstep to continue their
adventures with you.
</p>
<h3 id="suscribe">Suscribe to our newletter</h3>
</section>
</container>
</body>
The Css
#page-wrapper {
position: relative;
color: black;
margin: -9px;
padding: 10px;
border: 4px solid;
border-radius: 3px;
background-color: rgba(223, 42, 42, 0.20);
padding: 10px 20px 20px 20px;
}
header {
display: flex;
font-size: 1.3em;
margin-left: -10px;
margin-right: -10px;
background-image: url('https://cdn2.vectorstock.com/i/1000x1000/07/66/pink-
white-star-polka-dots-background-vector-7590766.jpg');
opacity: 0.80;
}
#header-img {
height: 120px;
}
#logo-name {
font-size: 2em;
color: black;
}
h1,
h2,
h3 {
font-size: 2em;
}
//navigation bar
#nav-bar {
display: flex;
justify-content: flex-end; //**not working***
}
#nav-ul {
list-style-type: none;
display: flex;
}
nav li {
padding: 4px;
}
//body
p {
font-size: 1.2em;
}
#video {
border: 5px solid;
border-radius: 3px;
color: pink;
}
Fix 1
The best way to fix this (to me) is to control layout at the flex container (parent) level. It's straightforward and declarative.
header {
…
justify-content: space-between;
}
Fix 2
Another way is to add flex-grow: 1 to your #nav-bar.
#nav-bar {
…
flex-grow: 1;
}
In this instance, setting flex-grow to 1 tells the element to take up the available space in its flex container.
Fix 3
The non-flexbox way would be to add a left auto margin to the #nav-bar, effectively pushing it as far right as possible.
#nav-bar {
…
margin-left: auto;
}
since your header has display: flex property, his childs act like flex items.
So if you want to move whole .nav-bar to right you have to set margin-left: auto to .nav-bar so that element will be pushed to right.
Means .nav-bar will have as big margin as can without breaking on new line from left so element will move to right.
Since the Header element is the container just add justifi-content: space-between; and this will force the elements to go left and right. Another way is to put position: absolute; right: 0; to the nav-bar container but the first way is cleaner.
I have the following markup:
<ul class="info-list">
<li class="info-item">
<div class="name">Name</div>
<img class="preview" src="/Image.png" />
<div class="data-wrapper">
Data
</div>
<div class="description">
Description
</div>
</li>
<li class="info-item">
<div class="name">Name</div>
<img class="preview" src="/Image.png" />
<div class="data-wrapper">
Data
</div>
<div class="description">
Here is a description. More description. Very descriptive.
</div>
</li>
</ul>
And here is the matching style:
.info-list{
text-align: center;
}
.info-item{
margin: 4px;
padding: 10px;
display: inline-block;
cursor: pointer;
background-color: black;
}
.preview{
margin: 4px 4px 4px 0;
float: left;
display: block;
width: 128px;
height: 128px;
}
.data-wrapper{
margin: 4px 0 4px 4px;
float: left;
width: 128px;
height: 128px;
}
.description{
clear: both;
width: 264px;
height: 100px;
}
The problem you will see is that the second element's height is equal with the first, but it is being propped up from the length of the content in the div.description element. This can be fixed by applying white-space: nowrap to either the div.description or the div.list-item elements but this causes the div.description content to overflow to the right. How can I fix this list? I do not want to float the elements because I want them to be centered within the list, but the inline whitespace handling is causing issues for some reason even though the div.description elements are all the same height / width.
Fiddle: http://jsfiddle.net/kap6quf6/2/
The default vertical alignment for inline elements is baseline, so you can set it to middle or top for .info-item so that they align:
.info-item {
margin: 4px;
padding: 10px;
display: inline-block;
cursor: pointer;
background-color: lightgray;
vertical-align:middle;
}
jsFiddle example
I have a div (navigation) that is "float:left;".
After this div main content comes. And second divs comes over the first one.
If I add style="clear:both;" after the first dif, then it works.
However, i wonder if this is the right way to do this, this is my only question.
<div class="nav">
<ul>
<li>text</li>...
</ul>
</div>
<div style="clear:both;"></div>
<div id="content-wrapper"></div>
.nav{
width: 100%;
float: left;
margin: 0 0 3em 0;
padding: 0;
list-style: none;
}
.nav li{
float: left;
margin: 0 2px;
}
.nav li a{
display: block;
padding: 8px 15px;
text-decoration: none;
font-weight: bold;
color: #fff;
border-right: 1px solid #ccc;
background-color: #3b3d49;
-webkit-border-radius: 7px 7px 0px 0px;
border-radius: 7px 7px 0px 0px;
}
Yes, that works fine. However, you don't need another element to clear the content, you can add the style to the content wrapper.
In your style sheet:
#content-wrapper { clear: both; }
Another approach is to add a container around the floating element, and make it contain its children using the overflow style:
<div class="nav-container">
<div class="nav">
<ul>
<li>text</li>...
</ul>
</div>
</div>
<div id="content-wrapper">
</div>
Then in your style sheet add:
.nav-container { overflow: hidden; }
The main use of the above mentioned "clear:both"
The clear property specifies which sides of an element where other floating elements are not allowed.
"clear:both"
means No floating elements allowed on either the left or the right side.
In answer to your question, cleaning floats with clear:both; is a pretty standard way of doing this, yes.
this is the best way, just add class .group to your container
.group:before,
.group:after {
content: "";
display: table;
}
.group:after {
clear: both;
}
.group {
zoom: 1; /* For IE 6/7 (trigger hasLayout) */
}
yes it is correct to see this example from the creators of html
http://www.w3schools.com/cssref/pr_class_clear.asp
You could use <br clear="all" /> for short hand. And another way is that you could use clearfix method, you could search it on google for the best. this is the method that #conner explained it.
Ok, I'm working on this website (its my first one), and I am looking for some insight on making my nav menu work better. When you go to the "projects" page, the about button all of a sudden looks like it has too much spacing to the right. Also, when you go to the "Contact" page, the menu is totally messed up. I thought about just adding the home button to the main page navigation so all the menus would be exactly the same and maybe it would work right, but there HAS to be a better solution.
Also, the website looks really flat. I'd be open to suggestions on giving it some depth, as well as any other criticism you may have. (bear in mind I've only been doing this for a couple months).
Web address
HTML:
<ul class="transparent" id="navcontainer" >
<li class="topnavleft floatleft">Home</li>
<li class="topnav floatleft">About</li>
<li class="topnavright floatleft">Projects</li>
</ul>
CSS:
#navcontainer {
margin-top: 0;
height: 55px;
width: 232px;
float: right;
overflow: visible;
padding: 0;
}
.topnav {
width: 45px;
border-right: 1px solid #FFF;
margin-right: 10px;
padding-right: 22px;
margin-left: 10px;
margin-top: 16px;
}
.topnavleft {
width: 45px;
border-right: 1px solid #FFF;
border-left: 1px solid #FFF;
margin-left: 7px;
padding-left: 10px;
padding-right: 6px;
margin-top: 16px;
}
.topnavright {
width: 45px;
border-right: 1px solid #FFF;
margin-right: 7px;
padding-right: 20px;
padding-left: 1px;
margin-top: 16px;
}
There is a problem with this line in the About page:
<div class="transparent" id="logo"><img src="Images/ALR%20%20custom%20guitars2.png" alt="ALR Custom Guitars" width="250" border="0" </img>
You have missed out the closing /> of the img tag, it should be like this:
<div class="transparent" id="logo"><img src="Images/ALR%20%20custom%20guitars2.png" alt="ALR Custom Guitars" width="250" border="0" /></img>
For screenreaders and search engines, the logo should have the text ALR Custom Guitars, use a background-image instead of an img tag, and set text-indent: -999px so that only the image will show.
Also, lots of your links point to www.ALRGuitars.com, they should be http://www.ALRGuitars.com.
EDIT:
Here are some errors to correct (remember to correct all errors and warnings from the W3C validation result):
This:
<a href="http://www.facebook.com/pages/ALR-Guitars/301363959926689" target="_blank"><img src="Images/facebook_512.png" border="0" height="32px" width="32px" </img><a/>
<img src="Images/twitter_512.png" border="0" height="32px" width="32px"</img>
Should be:
<a href="http://www.facebook.com/pages/ALR-Guitars/301363959926689" target="_blank"><img src="Images/facebook_512.png" border="0" height="32px" width="32px" />
<img src="Images/twitter_512.png" border="0" height="32px" width="32px"</img>
In the copyright notice, you have forgotten a semicolon after a character reference.
Either use © or ©.
This:
<link href'http://fonts.googleapis.com/css?family=Over+the+Rainbow|Open+Sans:600,700italic' rel='stylesheet' type='text/css'/>
Should be:
<link href='http://fonts.googleapis.com/css?family=Over+the+Rainbow|Open+Sans:600,700italic' rel='stylesheet' type='text/css'/>
There was a missing = sign after href.
EDIT #2:
After some fiddling with the CSS, try this for the menu:
#navcontainer {
float: right;
width: 250px;
height: 30px;
padding: 5px;
margin-top: 0;
overflow: visible;
}
.topnav a {
display: block;
width: 70px;
height: 20px;
padding: 5px;
text-align: center;
}
a:hover {
color: #606060;
font-style: italic;
}
It should correct the problem of the links moving when hovered over.
the spacing is because you specified topnav width as 45...'projects' is too large and 'about' is too small..let it be automatic or try to align all the text into the middle so that it wont seem weird...
I am building a fixed width site, 970px, centered, with a gradient as the surround. Originally the fixed width portion was white with several horizontal areas (menu, search area, product selection area) having a different background. This was accomplished simply with a background color of white for a div that is the next child of the body, which contained all the content of the page, and an override to the background color when needed. This worked fine.
Can I make these horizontal areas have the same background as the gradient, which will obviously be different at different places in the page? I thought I would simply keep the background-color transparent (the default) at all levels until I came to the parent of content I want white, making that parent's background-color #FFFFFF. This works if I specify a height to the area. However, the main body of the website will be of indeterminate height, and must be white (or something other than the gradient!). Are there any techniques through which I can force an element and its contents into a white background without specifying a height on that element?
Thanks.
Thanks for the response. I should clarify with code so that the question is clear. Sorry for that.
Here is sample HTML that illustrates the problem:
<body>
<div id="Page">
<div id="Header">
<div id="HeaderNavigationSection">
<div id="HeaderNavigationMenu">
<ul>
<li>Menu Item One</li>
<li>Menu Item Two</li>
</ul>
</div>
</div>
<div id="HeaderBannerSection">
<a href="#">
<img id="CompanyLogo" alt="Company Logo" src="" height="45" width="200" />
</a>
<p id="BannerSloganOne">Banner Slogan One Text</p>
<p id="BannerSloganTwo">Banner Slogan Two Text</p>
</div>
<div id="HeaderSearchSection">
<div class="HeaderSearchSectionLine">
<p class="HeaderSearchBoxLabel">Search Label One and Related Search Area</p>
</div>
<div class="HeaderSearchSectionLine">
<p class="HeaderSearchBoxLabel">Search Label Two and Related Search Area</p>
</div>
</div>
</div>
</div>
</body>
First, here is CSS that works, using a page-level white background color and a section level different background color (yellow for illustration). This works throughout my code. I do not show any resets or basic settings. Note that the commented-out CSS for the #HeaderBannerSection is not needed (it appears in the code that doesn't work, which is shown after this code).
html {
height: 100%;
background-color: #D4D4D4; /* surrogate for browser-specific gradient */}
body {
text-align: center;}
#Page {
width: 970px;
margin: 0px auto 10px auto;
line-height: 1.2;
font-family: Calibri, Arial, Helvetica, sans-serif;
font-size: 12px;
color: #000000;
text-align: left;
background-color: #FFFFFF;}
#HeaderNavigationSection {
height: 30px;
background-color: #FFFF00;}
#HeaderNavigationMenu {
display: inline;
float: right;}
#HeaderNavigationMenu li {
display: inline;
float: left;}
#HeaderNavigationMenu li a {
display: inline;
float: left;
margin: 8px 0px 10px 0px;
padding: 0px 10px 0px 10px;}
#HeaderBannerSection {
/*width: 970px;*/
/*background-color: #FFFFFF;*/}
#CompanyLogo {
display: inline;
float: left;
width: auto;
margin: 10px 0px 10px 10px;}
#BannerSloganOne {
display: inline;
float: left;
width: 330px;
margin: 20px 0px 20px 80px;}
#BannerSloganTwo {
display: inline;
float: right;
width: 300px;
margin: 20px 10px 20px 0px;
text-align: right;}
#HeaderSearchSection {
clear: both;
height: 68px;
background-color: #FFFF00;}
.HeaderSearchSectionLine {
clear: both;}
.HeaderSearchBoxLabel {
display: inline;
float: left;
margin: 10px 0px 0px 10px;}
Here are the changes to that CSS that attempt to make the html-level background color (namely the gradient) the default, through transparency, except where specifically overridden where desired (in this example, for the #HeaderBannerSection (with code from above commented out as needed)):
#Page {
width: 970px;
margin: 0px auto 10px auto;
line-height: 1.2;
font-family: Calibri, Arial, Helvetica, sans-serif;
font-size: 12px;
color: #000000;
text-align: left;
/*background-color: #FFFFFF;*/}
#HeaderNavigationSection {
height: 30px;
/*background-color: #FFFF00;*/}
. . .
#HeaderBannerSection {
width: 970px;
background-color: #FFFFFF;}
. . .
#HeaderSearchSection {
clear: both;
height: 68px;
/*background-color: #FFFF00;*/}
This code does not work. The background-color for the section that should be white instead remains the gradient. This is true unless I specify a height for the section, then it all works. But I won't be able to specify the height for the main section (not shown) unless I do a jQuery to determine rendered height and then do a jQuery css height setting (not ideal, and haven't even tried it yet to see if it works). Incidentally, the offending code does work in IE6 and IE7 (at least as rendered in Expression Web 4 SuperPreview).
Thanks again for any help you can give me.
For your banner section try this jsfidle
the min-width property forces the div to have a specific minimum width if the content inside it is not enough to fill it (it will be the specified width by default until the content in it is so much that the div has to expand)
I've changed the background colour so that you can see the actual div # work
feel free to change to #FFFFFF once you are sure you have gotten it correct.