I want to achieve this:
I have achieved this:
There is gap on left of the navigation. I don't understand why it is there. Page is live at http://goo.gl/K17Fjs
My markup:-
<footer>
<div id="contact-info">
<p><span id="footer-text-big">Contact Us:</span></p>
<p>
Tel: +974 44151991<br />
P.O.Box: 202315, Doha – Qatar<br />
E-mail: hajrisalemal#gmail.com<br />
krishnabhw1#yahoo.com
</p>
</div>
<div id="footer-nav">
<ul>
<li>Home</li>
<li>About</li>
<li>Services</li>
<li>Projects</li>
<li>Photo Gallery</li>
<li>Contact</li>
</ul>
</div>
<div id="copyright">
Copyright © 2014 SALEM AL HAJRI. All Rights Reserved.
</div>
</footer>
My CSS:-
footer { height: 158px; color:#FFF; margin-top: 25px; padding-top: 30px; font-size: 11px; font-family:Arial, Helvetica, sans-serif;}
#contact-info { float: right; text-align: right;}
#footer-text-big { font-size:13px;}
#footer-nav { float: left; width: 600px; text-align: left;}
#footer-nav li { display: inline;}
#footer-nav a {
font-family: Arial, Helvetica, sans-serif;
font-size: 12px;
font-weight: normal;
color: #ffffff;
text-decoration: none;
margin-right: 30px;
}
#copyright { width: 600px; float: left; text-align: left; margin-top: 65px;}
Lists (ul and ol) have by default padding and margin set. You should change it manually, so if you don't want any margins you should add to your css:
#footer-nav ul {margin:0; padding: 0;}
or
#footer-nav ul {margin-left:0; padding-left: 0;}
or set some other custom values as for example
#footer-nav ul {margin-left: 10px; padding-left: 0;}
In addition I see you use HTML5. You should rather create nav element instead of div id="footer-nav"
Give this a try
#footer-nav ul{
padding:0;
}
Now define your #footer-nav ul padding-left : 0 as like this
#footer-nav ul{padding-left:0;}
Related
I'm building a menu with two sections and a logo between.
And i would like to know how can I prevent the logo from moving whenIi change the text from both sections. I would like to fix the logo, when i change the about us for exemple, i would like to see the about us editing and moving to the left side, not to the right side.
Sorry for my english:
Jsfiddle:
http://jsfiddle.net/uL52rvwn/
HTML:
<div class="menu">
<div class="m-info">
<ul>
<li class="l-aboutus"><a>About us</a></li>
</ul>
</div>
<div id="logo"><img alt="logo" src="http://i.imgur.com/bebZYcu.png" width="80" height="80" /></div>
<div class="m-contact">
<ul>
<li class="l-ourcontacts"><a>Contacts</a></li>
</ul>
</div>
</div>
What I did? I made the m-info float:left, and m-contact float:right, than made the #logo's margins negative to move it to the center.
Fiddle: http://jsfiddle.net/uL52rvwn/3/
<style>
.m-info {
width: 50%;
float: left;
text-align: right;
margin-left: -40px;
padding-right: 40px;
}
.m-contact {
width: 50%;
float: right;
text-align: left;
padding-left: 40px;
margin-right: -40px;
}
#logo {
float: left;
margin-left: -40px;
margin-right: -40px;
}
.menu ul {
padding: 0;
}
.menu li {
display: inline;
padding: 10px;
color: #eaeaea;
text-transform: uppercase;
z-index: 11;
position: relative;
}
.m-info ul li a, .m-contact ul li a {
text-transform: uppercase;
color: #a1a1a1;
letter-spacing: 7px;
font-size: 12px;
}
.m-info ul li a:hover, .m-contact ul li a:hover{
cursor:pointer;
color:#c8c8c8;
}
.m-contact ul{
margin-right:20px;
}
</style>
<div class="menu">
<div class="m-info">
<ul>
<li class="l-aboutus"><a>About us</a></li>
</ul>
</div>
<div id="logo"><img alt="logo" src="http://i.imgur.com/bebZYcu.png" width="80" height="80" /></div>
<div class="m-contact">
<ul>
<li class="l-ourcontacts"><a>Contacts</a></li>
</ul>
</div>
</div>
Absolute positioning should work: http://jsfiddle.net/6L35a0up/7/
I changed the following CSS rule:
#logo img {
left:50%;
z-index: 12;
position: absolute;
}
And moved the logo div to outside of the .menu wrapper.
I made this horizontal menu, and everything was nice and good, until I realized that I can't make the submenus appear vertical, can someone help me?
Here is the menu code:
<div id="nav_custom">
<div id="nav_custom_wrapper"></div>
<ul>
<li>NEW ARRIVALS
</li>
<li>
SEQUIN DRESSES
<ul id="nav_custom_sub">
<li>AVAILABLE</li>
<li>EXAMPLES SOLD</li>
</ul>
</li><li>
BOHO DRESSES
<ul id="nav_custom_sub">
<li>AVAILABLE</li>
<li>EXAMPLES SOLD</li>
</ul>
</li><li>
MOD DRESSES
<ul id="nav_custom_sub">
<li>AVAILABLE</li>
<li>EXAMPLES SOLD</li>
</ul>
</li><li>
PSYCHEDELIC DRESSES
<ul id="nav_custom_sub">
<li>AVAILABLE</li>
<li>EXAMPLES SOLD</li>
</ul>
</li><li>
COATS & JACKETS
<ul id="nav_custom_sub">
<li>AVAILABLE</li>
<li>EXAMPLES SOLD</li>
</ul>
<li>
KIMONOS
<ul id="nav_custom_sub">
<li>AVAILABLE</li>
<li>EXAMPLES SOLD</li>
</ul>
</li>
</ul>
</div>
Here is the css that I have used:
#nav_custom {
text-decoration: none;
font-family: 'Source Sans Pro', sans-serif;
font-size: 14px;
font-style: normal;
font-variant: normal;
font-weight: 400;
line-height: 49px;
color: #000;
display: block;
padding: 10px;
width: 960px;
margin-left: -35px;
margin-right: auto;
text-align: center;
width: auto;
}
#nav_custom_wrapper {
width: 960px;
margin-left: auto;
margin-right: auto;
text-align: center;
}
#nav_custom ul{
list-style-type: none;
padding: 0;
margin: 0;
position: relative;
}
#nav_custom ul li{
display: inline-block;
}
#nav_custom ul li:hover{
color: #000;
text-decoration: none;
}
#nav_custom ul li a,visited{
color: #BA7145;
padding: 15px;
text-decoration: none;
}
#nav_custom ul li a:hover{
color: #000;
text-decoration: none;
}
#nav_custom ul li:hover ul{
display: block;
}
#nav_custom ul ul{
display: none;
position: absolute;
margin-top: -25px;
margin-left: -50px;
text-align: center;
color: #4f4f4f;
}
Remove the inline-block on the #nav_custom ul li
See fiddle for working example: http://jsfiddle.net/Tv77g/
Inline-block works similarly to floats, which is why they were stacking left to right next to each other instead of one on top of each other.
I didn't go through to adjust your children. I don't know how the menu is supposed to display. Most likely the children (#nav_custom ul ul) would have the margins adjusted. You can remove text-align:center; on #nav_custom to make the menu completely left aligned.
To set this only on children, add
#nav_custom_sub li {
display: block !important;
}
This will override the inline-block for only the children (in the dropdown). You will have to adjust the margins to make them appear correctly.
I have a simple question. I'm trying to display the elements for "about" "general" and "social-buttons" classes within a nested unordered list. I want these to appear horizontal and inline with each other. I want them to be side by side basically, not vertical. If you can help me figure out which selector I need to add the 'display:inline' block, that would be much useful.
<div class="footer-container">
<div id="footer_menu">
<div id="footer-copy">
<li class="about-blurb">
<h3>Viral DNA</h3>
<ul>
<li>
<p>Virael Marketing is the leading digital marketing blog for the social web. We are a one-stop hub to help you learn from your viral marketing campaigns, offer tips & tricks, and build the best digital marketing teams.</p>
</li>
</ul>
<li class="General">
<h3>General</h3>
<ul>
<li><a class="button" href="#">Media</a></li>
<li><a class="button" href="#">Resources</a></li>
<li><a class="button" href="#">Blog</a></li>
<li><a class="button" href="#">Store</a></li>
<li><a class="button" href="#">Contact</a></li>
</ul>
<li class="social-icons">
<h3>Follow Virael</h3>
<ul>
<li>
<!--social media buttons go here-->
</li>
</ul>
</ul>
</div>
</div>
The CSS:
.footer-container {
font-family: MyriadPro-Regular, 'Myriad Pro Regular', MyriadPro,'MyriadPro', Arial, sans-serif;
float: left;
text-align: left;
width: 828px;
text-transform: capitalize;
background-color: #4169E1;
color: #FFF;
position: relative;
bottom: 0;
left: 269px;
border-top: 10px solid #B0C4DE;
overflow: hidden;
z-index=-1000;
}
.footer-container h3 {
text-align:justify;
}
#footer_menu {
font-family: MyriadPro-Regular, 'Myriad Pro Regular', MyriadPro,'MyriadPro', Arial, sans-serif;
list-style-type:none;
z-index=-1000;
}
#footer_menu ul {
margin: 0px 30px;
padding: 10px 30px;
list-style-type:none;
text-decoration:none;
display:inline;
z-index=-1000;
}
#footer_menu ul li {
margin: 0 0;
padding: 5px 0;
z-index=-100;
display:block;
color: white;
clear:both;
}
#footer_menu .about-blurb ul li {
width: 200px;
height: auto;
text-align:justify;
}
Replace your css with mine. Live example here
#footer_menu ul {
/* margin: 0px 30px; */
padding: 10px 30px;
list-style-type: none;
text-decoration: none;
display: inline;
}
#footer_menu ul li {
margin: 0 0;
padding: 5px 0;
display: inline-block;
color: white;
clear: both;
}
Remove margins from the ul and add inline-block to li
I am working on styling a Twitter Feed Javascript for my layout. The issue is, when I float the date and interaction links, the border that's supposed to surround all the parts of the particular tweet ignores the date and interaction divs, causing the border to overlap with them.
Is there any way to remedy this issue. The issue can be viewed here (at the bottom of the page): http://www.noellesnotes.com
Relevent Code:
HTML
<div id="tweets">
<ul>
<li>
<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;
}
This is the case for a clearfix div.
HTML:
<div id="tweets">
<ul>
<li class="clearfix"> <!-- clearfix class added here -->
<p class="tweet">The tweet.</p>
<p class="timePosted">TIME</p>
<p class="interact">INTERACT LINKS</p>
</li>
</ul>
</div>
CSS:
.clearfix:after {
content: ".";
display: block;
height: 0;
clear: both;
visibility: hidden;
}
.clearfix { /* for IE/Mac */
display: inline-block;
}
There are a few other clearfix solutions I recommend searching to find and use the one that works best for your needs.
I am using the below code and getting a problem where if I resize the browser my mainpage div wraps below the menubar div, I have tried min and max width and nothing has worked. Any help would be greatly appreciated. I want the mainpage div to not drop below the menubar and stay side by side with it even if the browser is made smaller.
HTML:
<div id="menubar" style="width: 16%; height: 100px;" title="menu" align = "center"> <!-- This is the code for the menubar, to add a new option to the menubar-->
<!-- Add a new <li> tag below the bottom link, to delete a link, delete the desired
link element. -->
<ul>
<li style="align: center;"><img alt="logo" height="63" src="images/ClevelandLogo.gif" width="126" /></li>
<li >Home</li>
<li>General</li>
<li>Site map</li>
<li>Rules & Procdures</li>
<li>Envirommental</li>
<li>Energy</li>
<li>IT</li>
<li>SAP</li>
<li>rhtrhtrh</li>
<li>Quality</li>
<li>Safety</li>
<li>Human resources</li>
<li>Production</li>
<li>Engineering</li>
<li>Feedback</li>
<li>wrefwefwefwef</li>
<li>Company mobile phones</li>
<li>Climate Survery Updates</li>
<li>Training</li>
<li>Sports Dome</li>
</ul>
</div>
<!--The mainpage div is where all the page's indivdual content is displayed.-->
<div id="mainpage" class="auto-style1" style="height: 486px; float:left; color: #000000; font-size: 11pt;">
<p> -0je45iwgtjj4eg0prjegtgfjotrsjgse'[agpraeogjk-odetkgbokporgkspfkdgkpfdgkpdfkg</p>
</div>
<!-- The container1 div is used to create the bottom green line in the site -->
CSS:
#mainpage
{
border: thin solid #008852;
width: 84%;
float: left;
background-color: #EDEFEE;
height: auto;
border-radius: 20px;
height: 100%;
position: fixed;
color: #008852;
}
#mainpage a:link, #mainpage a:visited
{
font-family: Arial, Helvetica, sans-serif;
font-size: small;
font-weight: bold;
}
#menubar ul
{
list-style-type: none;
margin: 0;
padding: 0;
float: left;
}
#menubar a:link, #menubar a:visited
{
border-top-width: 1px;
display: block;
font-weight: bold;
color: #000000;
background-color: #EFF1EB;
width: 180px;
text-align: center;
padding: 4px;
text-decoration: none;
text-transform: uppercase;
border-style: solid;
border-color: #638529;
font-family: Arial, Helvetica, sans-serif;
border: 1px;
position: fixed;
}
Wrap both of your div's in another element with a fixed width. Then float the menu bar and the main page to the left.
div {
width:50px;
height:50px;
border:1px solid black;
float:left;
}
section {
width:110px;
}
Something like the following: http://jsfiddle.net/uBgg3/
What you are trying to build can be done as follows.
<div id="menubar">
<div class="logo"><img alt="logo" src="http://placehold.it/126x63" /></div>
<ul>
<li>Home</li>
<li>General</li>
<li>Site map</li>
<li>Rules & Procdures</li>
<li>Envirommental</li>
<li>Energy</li>
<li>IT</li>
<li>SAP</li>
<li>rhtrhtrh</li>
<li>Quality</li>
<li>Safety</li>
<li>Human resources</li>
<li>Production</li>
<li>Engineering</li>
<li>Feedback</li>
<li>wrefwefwefwef</li>
<li>Company mobile phones</li>
<li>Climate Survery Updates</li>
<li>Training</li>
<li>Sports Dome</li>
</ul>
</div>
<div id="mainpage">
<p>Some sample text...</p>
</div>
and the CSS:
#menubar {
width: auto;
float: left;
margin-right: 20px;
}
#mainpage {
overflow: auto;
border: thin solid #008852;
background-color: #EDEFEE;
height: auto;
min-height: 500px;
border-radius: 20px;
color: #008852;
}
#mainpage a:link, #mainpage a:visited {
font-family: Arial, Helvetica, sans-serif;
font-size: small;
font-weight: bold;
}
#menubar ul {
list-style-type: none;
margin: 0;
padding: 0;
}
#menubar a:link, #menubar a:visited {
border-top-width: 1px;
display: block;
font-weight: bold;
color: #000000;
background-color: #EFF1EB;
width: auto;
text-align: center;
padding: 4px;
text-decoration: none;
text-transform: uppercase;
border-style: solid;
border-color: #638529;
font-family: Arial, Helvetica, sans-serif;
border: 1px;
}
See fiddle at: http://jsfiddle.net/audetwebdesign/sXNLT/
I cleaned up the inline styles since they were getting in the way. Use CSS rules, so much easier to maintain.
Float your #menubar to the left and set height:auto so that you can see all the links without any overflow issues.
On #mainpage, no need to float and set overflow: auto to prevent the content from wrapping around the floated menu.
Finally, no need for position: fixed in your navigation links.
You could put the two divs in a html table (2 columns, 1 row) and set the width of your body column to a specific value or percentage.