I had to apply a clearfix to my list items in order for a border to wrap around my floats, but once I added the clearfix, it caused a wordwrap I had applied to the list to stop working and now long URLs extend the div into other divs.
If anyone could help with this issue, it would be greatly appreciated. The issue can be viewed here: http://www.noellesnotes.com (Tweets section of the footer).
Here;s the relevant code:
HTML
<div id="tweets">
<ul>
<li class="clearfix">
<p class="tweet">The tweet.</p>
<p class="timePosted">TIME</p>
<p class="interact">INTERACT LINKS</p>
</li>
</ul>
</div>
CSS
.tweet, .tweet a, .tweet span, .interact a{
margin-bottom: 10px;
font-size: 12px;
font-family: 'Open Sans', sans-serif, Georgia, sans-serif;
word-wrap:break-word;
}
.timePosted{
width:40%;
font-size: 12px;
float: left;
font-weight: bold;
text-align: left;
}
.interact{
width:60%;
font-size: 12px;
float: left;
text-align: right;
overflow: hidden;
}
.interact a{
margin-right: 3px;
text-decoration: underline;
font-family: 'Arvo', Georgia;
}
#tweets ul{
margin-left: 0;
padding-left: 0;
list-style: none;
}
#tweets ul li{
border: 3px solid rgba(255,255,255,0.4);
margin: 3px 0;
padding: 3px;
}
.clearfix:after {
content: ".";
display: block;
height: 0;
clear: both;
visibility: hidden;
}
.clearfix { /* for IE/Mac */
display: inline-block;
}
Adding:
#tweets ul li { width: 100%; }
Solved the issue for me :)
Related
my problem is that i have styled my navigation bar with a block/button style graphic. that works just fine it's just when i put any tags it resorts to that styling? is there a way on the css style sheet to stop that style and having a different one. i've had this problem on other pages too, but it didnt end up being a problem. can anyone help?
css:
nav {
position:relative;
z-index:3;
position: absolute;
margin-left: 420px;
margin-top: -15px;
float: right;
}
ul {
list-style-type: none;
margin-top: 2px; padding: 0;
overflow: hidden;
}
li {
float: left;
margin-top: 0px;
}
a:link,a:visited {
display: block;
width: 100px;
height: 25px;
font-weight: bold;
font-size: 12px;
color: #000000;
background-image: url(images/buttonreg.png);
text-align: center; padding-top: 5px;
text-decoration: none;
font-variant: small-caps;
}
a:hover,a:active {
color: #FFAA50;
background-image: url(images/buttonhover.png);
}
html: just an unordered list
<nav>
<ul>
<li>home</li>
<li>about</li>
<li>portfolio</li>
<li>services</li>
<li>contact</li>
</ul>
</nav>
It's not clear what your question is, but I'm sure what you want to do is easy enough. Sounds like you need to add a class or ID to your elements, or to make your CSS more specific. E.g.
nav ul {
list-style-type: none;
margin-top: 2px; padding: 0;
overflow: hidden;
}
nav li {
float: left;
margin-top: 0px;
}
nav a:link,a:visited {
display: block;
width: 100px;
height: 25px;
font-weight: bold;
font-size: 12px;
color: #000000;
background-image: url(images/buttonreg.png);
text-align: center; padding-top: 5px;
text-decoration: none;
font-variant: small-caps;
}
nav a:hover,a:active {
color: #FFAA50;
background-image: url(images/buttonhover.png);
}
Simply make your CSS selector more specific by making it only select <a> elements that are descendants of <nav>:
nav a:link,
nav a:visited {
display: block;
width: 100px;
height: 25px;
font-weight: bold;
font-size: 12px;
color: #000000;
background-image: url(images/buttonreg.png);
text-align: center; padding-top: 5px;
text-decoration: none;
font-variant: small-caps;
}
nav a:hover,
nav a:active {
color: #FFAA50;
background-image: url(images/buttonhover.png);
}
I've gotten my navbar to work like I wanted, mostly, but now, again, I am having the problem, that when I minimize the window, the navbar with all its links collapses, and it almost looks quite decent, but it covers over my content area and some of the link text runs over the navbar area and I have to hide that and etc. So the simplest way I thought was to have navbar not move at all, and just be scrollable with the entire page.
Here is my CSS:
#navBar{
width: 100%;
float: left;
position: fixed;
top: 0;
background-color: #000000;
left: 0;
}
#navBar ul{
margin: 0 auto;
height: 65px;
list-style:none;
min-width:760px;
}
#navBar li{
float: left;
height: 65px;
}
#navBar li a:link , a:visited{
font-size: 90%;
display: block;
color: #ffffff;
padding: 20px 25px;
font: 18px "open sans", sans-serif;
font-weight: bold;
text-decoration: none;
}
#navBar li a:hover{
background-color: #ffffff;
color: #000000;
text-decoration: none;
Here is my HTML:
<body>
<nav>
<div id="navBar">
<ul>
<li>ESILEHT</li>
<li>UUDISED</li>
<li>ÜLEVAATED/ARVUSTUSED</li>
<li>LOGI SISSE</li>
</ul>
</div>
</nav>
<div class="content">
<div id="logo">
<img src="http://i.imgur.com/Y4g5MOM.png" alt="Gaming website logo" height="84" width="540"/>
</div>
</div>
<div class="artikkel">
<p>check check</p>
</div>
</body>
</html>
Would appreciate some help, my first real webpage that I am working on, been trying quite a few things, but cannot seem to find a compromise, always one thing works and then the other thing wont work as intended..
You should remove position:absolute; and float:left; on #navBar like this :
FIDDLE
CSS :
#navBar {
width: 100%;
background-color: #000000;
left: 0;
overflow: hidden;
}
#navBar ul {
margin: 0 auto;
height: 65px;
list-style:none;
}
#navBar li {
float: left;
height: 65px;
}
#navBar li a:link, a:visited {
font-size: 90%;
display: block;
color: #ffffff;
padding: 20px 25px;
font: 18px"open sans", sans-serif;
font-weight: bold;
text-decoration: none;
}
#navBar li a:hover {
background-color: #ffffff;
color: #000000;
text-decoration: none;
}
How do you centre the links themselves in the navigation bar?
The border is fluid and the nav buttons rearrange themselves to different screen sizes but I just can't get them to be in the middle, instead they are always on the left.
My HTML:
<div id="centerment">
<div id="navigation">
<div id="menu4">
<ul>
<li> <span class="title"><strong>HOME</strong></span> </li>
<li> <span class="title"><strong>ABOUT</strong></span></li>
<li> <span class="title"><strong>WOOD</strong></span> </li>
<li> <span class="title"><strong>CONTACT</strong></span></li>
</ul>
</div>
My CSS:
In all 3 responsive size: (mobile, tablet and desktop).
#centerment {
position:relative;
clear: both;
float: left;
margin-left: 0px;
margin-right: 0px;
width: 100%;
display: block;
}
#menu4 ul {
list-style: none;
font-family: "corbert regular regular";
font-size: 10px;
letter-spacing: 2px;
line-height: 1.2em;
float: left;
clear: left;
border-bottom: 1px solid #000;
border-top: 1px solid #000;
}
#menu4 ul li{
float: left;
}
#menu4 ul li a{
display: inherit;
text-decoration: none;
color: #000000;
text-align: center;
margin-left: 0 auto;
margin-right: 0 auto;
padding-top: 10px;
padding-right: 10px;
padding-bottom: 5px;
padding-left: 10px;
width: 170px
}
#menu4 ul li a span{
display:inherit;
}
#menu4 ul li a span.title{
}
#menu4 ul li a:hover span.title{
color: #000000;
}
#menu4 ul li a span.text{
padding: 0px 5px;
font-family: "corbert regular regular";
font-size: 13px;
font-style: normal;
font-weight: 300;
letter-spacing: normal;
line-height: 1.6em;
color: #000000;
visibility: hidden;
}
#menu4 ul li a:hover span.text{
visibility:visible;
}
.gridContainer.clearfix #navigation #menu4 ul li a .title {
font-family: Corbert;
}
Many many thanks in advance!
set containing element to text-align: center; then set the li's to display: inline-block; if there are no floats on the a tags this should do it.
Get rid of borders on #menu4 ul, give it a margin of -1px auto;, add this:
#menuBox {
margin: 0 auto;
width: 53.2em;
height: 30px;
border-bottom: 1px solid #000;
border-top: 1px solid #000;
}
To contain the ul.
I originally posted the wrong link here is the correct one: jsFiddle
You can lose the ul and just use spans. Change your HTML to this:
<div id="centerment">
<div id="navigation">
<div id="menu4">
<div class="outer">
<span class="inner"><span class="title"><strong>HOME</strong></span> </span>
<span class="inner"><span class="title"><strong>ABOUT</strong> </span></span>
<span class="inner"><span class="title"><strong>WOOD</strong></span> </span>
<span class="inner"><span class="title"><strong>CONTACT</strong> </span></span>
<span class="finish"></span>
</div></div></div></div>
Make sure to keep the "finish" span at the bottom of your list. That spaces all the links correctly.
Then add this to your CSS:
.outer {text-align: justify; width:70%; margin:0px auto; border-top:1px solid; border-bottom:1px solid;}
.outer span.finish {display: inline-block; width: 100%}
.outer span.inner {display: inline-block; white-space: nowrap}
Then change #menu4 ul to #menu4 .inner with this CSS:
#menu4 .inner {list-style: none; font-family: "corbert regular regular"; font-size: 10px; letter-spacing: 2px; line-height: 1.2em;
}
and change the "#menu4 ul li a" to say "#menu4 a"
That should do it. You can change the width % of .outer to play with the width of the nav as a whole.
I am trying to have a horizontal menu, but the ul is aligned to the right instead of in the middle.
Here are my CSS and HTML:
CSS:
#menu
{
clear: both;
float: left;
width: 830px;
display: inline;
position: relative;
z-index: 1;
border-top: 1px solid #e9e6d9;
border-bottom: 1px solid #e9e6d9;
margin: 0 auto;
background-color:#FFFFFF;
padding: 0;
}
#menu ul {
margin: 0;
display: block;
text-align: center;
padding: 0;
float: right;
}
#menu li {
/*font-family: Georgia, "Times New Roman", Times, serif;*/
font-family: sans-serif, Helvetica, Arial;
font-size: 13px;
font-weight: normal;
float: left;
position: relative;
list-style: none;
margin: 0;
display: inline-block;
padding: 0;
}
HTML:
<div id="menu">
<ul>
<li>
<a href="http://www.tahara.es/">
<span>HOME</span>
</a>
</li>
<li>
<a href="http://www.tahara.es/shop/">
<span>SHOP</span>
</a>
</li>
</ul>
</div>
Thanks in advance for any suggestion!
You can remove your float properties.
Just add a width to your #menu ul and add margin : 0 auto; to make it centered.
Example :
#menu ul {
width: 300px;
margin: 0 auto;
}
Live demo here : http://codepen.io/joe/pen/uAaHo
Change #menu ul - use float: left instead of float: right
#menu ul {
margin: 0;
display: block;
text-align: center;
padding: 0;
float: left;
}
I fixed your problem.
The html code is alright and i changed the css code:
#menu
{
clear: both;
width: 830px;
display: inline;
position: relative;
z-index: 1;
border-top: 1px solid #e9e6d9;
border-bottom: 1px solid #e9e6d9;
margin: 0 auto;
background-color:#FFFFFF;
padding: 0;
}
#menu ul {
margin: 0;
display: block;
text-align: center;
padding: 0;
}
#menu li {
/*font-family: Georgia, "Times New Roman", Times, serif;*/
font-family: sans-serif, Helvetica, Arial;
font-size: 13px;
font-weight: normal;
position: relative;
list-style: none;
margin: 0;
display: inline-block;
padding: 0;
I basically deleted any occurrency of float:right;. Fixing your problem is as simple as this.
Here's a DEMO.
If you need further assistance i can help you.
I also suggest you a few link that you can find useful for building css menus:
http://csswizardry.com/2011/02/creating-a-pure-css-dropdown-menu/
http://net.tutsplus.com/tutorials/html-css-techniques/how-to-create-a-drop-down-nav-menu-with-html5-css3-and-jquery/
http://net.tutsplus.com/tutorials/html-css-techniques/how-to-build-a-kick-butt-css3-mega-drop-down-menu/
http://net.tutsplus.com/tutorials/design-tutorials/how-to-build-and-enhance-a-3-level-navigation-menu/
The simplest code to position Your menu, is quite simple.
This code works correctly, tested on latest Safari, Chrome, Opera, Firefox. Also on IE11 and IE8.
http://jsfiddle.net/5ZrEx/
#menu
{
width: 830px;
margin: 0 auto;
display: inline;
}
#menu ul {
text-align: center;
}
#menu li {
display: inline-block;
}
So I have a menu from ul and li, and it looks something like this at page load:
but when i click each menu and executed the code this happens:
what should i do? here's my CSS:
#menu-centered {
padding: 0px;
margin-bottom: 0px;
}
#menu-centered ul {
margin: 0;
padding: 0;
height: 99px;
width: 603px;
}
#menu-centered li {
display: inline;
list-style: none;
padding: 0px;
background: url(images/menu1.png) no-repeat right top;
}
#menu-centered a {
border-style: none;
border-color: inherit;
border-width: medium;
display: block;
margin-right: 0;
padding: 20px 30px 0px 30px;
text-decoration: none;
font-family: Arial, Helvetica, sans-serif;
font-size: 16px;
font-weight: normal;
color: #FFFFFF;
height: 68px;
width: 130px;
text-align: center;
}
#menu-centered a:hover {
background: url(images/menu2.png) no-repeat right top;
}
and here's my html code for the menus:
<div id="menu-centered">
<ul>
<li> <a href="javascript:Clikbtn1()" >MENU1</a></li>
<li>MENU2</li>
<li>MENU3</li>
</ul>
</div>
Please help. Thanks
Your menus need some LoVe and HAte. In other words you need to create all four of the important link pseudoselectors to avoid letting browsers destroy your layout by applying the default active pseudoslector.
Define a:link, a:visited, a:hover and a:active for your menu, in that order exactly.