My menu is currently under the logo, but instead I want it to be horizontal to the logo. I think the float property is the only way to do something like this(?) but it doesn't work, it won't float.
#top_menu {
height: 20px;
color: #333;
position: relative;
float: right;
}
#top_menu ul li {
float: left;
color:#333;
padding-right:15px;
font-family: Tahoma, Helvetica, sans-serif;
font-size:11px;
}
#top_menu ul li a {
text-decoration:none;
color: #666;
padding: 1px;
padding-right: 8px;
}
#top_menu ul li a:hover {
color:#f2e9c9;
}
#logo{
margin-top: 15px;
width: 200px;
height: 30px;
position: relative;
right: 5px;
}
<div id="logo"><img src="logot.png" alt="lolly"></div>
<div id="top_menu">
<ul>
<li>Portada|</li>
<li>Equipo|</li>
<li>Workbook|</li>
<li>Frescología|</li>
<li>Clientes|</li>
<li>Blog|</li>
<li>Noticias</li>
</ul>
</div>
What's wrong?
If I understand correctly you want the Logo and the Menu on the same horizontal line. If that is the case you can:
Float the logo to the left OR
#logo{
margin-top: 15px;
width: 200px;
height: 30px;
position: relative;
right: 5px;
float:left;
}
Display the logo as inline-block
#logo{
margin-top: 15px;
width: 200px;
height: 30px;
position: relative;
right: 5px;
display:inline-block;
}
Put the logo div after the top_menu div.
Related
I've got an interesting one: I was testing methods to get the list-item elements of a nav bar to spread evenly across the length of a nav. I used the display:table and display: table cell method to get the most even spread and that seemed to work fine.
When I went to add an ::after element so I could add a top-bar and have a smoother on-hover effect, I found that the bar extended past where I wanted it to -- I was trying to have it just to the end of the words "Communication Design". So I thought I'd just resize the nav container holding my list-elements but because it's a table/table-cell, when the nav resizes, the list-items shink along with it and I can never shore up the last element in the list.
Is there a way to either affect the size of the last table cell or only show a percentage of the ::after element?
Code:
HTML:
<h3>Test & Co.</h3>
<p id="title2">Communications Design</p>
<div id="navContainer">
<ul>
<li>Home</li>
<li>About</li>
<li>Work</li>
<li>Contact</li>
</ul>
</div>
CSS:
*
{
padding: 0;
margin: 0;
}
h3
{
padding-left: 140px;
display: inline-block;
padding-top: 10px;
padding-bottom: 25px;
}
#title2
{
display: inline-block;
float: right;
font-size: 16px;
margin-right: 252.5px;
padding-top: 14px;
padding-bottom: 25px;
}
#navContainer
{
//border: 1px solid black;
width: 643px;
margin-left: 140px;
height: 30px;
background: white;
}
#navContainer ul
{
list-style:none;
display: table;
width: 100%;
}
#navContainer ul li
{
display: table-cell;
height: 30px;
line-height: 30px;
font-family:arial;
font-size: 12px;
text-align: left;
//border: 1px solid black;
transition: color .2s ease-in-out;
position: relative;
}
#navContainer ul li::after
{
content: "";
display: block;
float: right;
position: absolute;
margin: auto;
height: 1px;
top: 0;
width: 100%;
background: #ccc;
transition: background-color .2s ease;
}
#navContainer ul li:hover::after
{
background: #8c8c8c;
}
#navContainer ul li:hover
{
color: #A6CFEB;
}
i am trying to keep the footer div at the bottom of the screen when the content is shorter than the view port, but it also has to remain at the bottom on the page content(not the view port) when the content is taller than the view port.
So far it remains at the bottom of the content when zoomed in, but i can't get it to stick to the bottom when zoomed out. There are samples with position: absolute; that i have seen, but it makes the footer remain at the bottom of the view port and not the content when zoomed in.
I have to do this for a school unit, is there a way to do this?
For now i have the footer position as relative, though i guess that wont do anything but stick it close to the last div, yeah? but i seem to find what i need to do.
Here is the site:
http://www.foodforthought.webatu.com/Index.html When you zoom right out you will see the footer not stay at the bottom.
Here is my CSS:
* { padding: 0; margin: 0; font-family: verdana; }
html {
height: 100%;
}
body {
font-size: 13px;
color: #000;
background-color: white;
background-position: center;
background-repeat: repeat-y;
background-image: url('../images/background.jpg');
}
/* Main div container */
#wrapper {
margin: 0 auto;
width: 960px;
height: auto;
}
/* Header div */
#wrapper #header {
height: 200px;
background-color: green;
}
/* Special event section */
#header p {
position:relative ;
left: 30px;
top: -100px;
width: 300px;
z-index: 1;
color: white;
border-style: dashed;
padding: 5px;
border-width: 1px;
}
/* Horizontal list div */
#wrapper #navigation {
height: 25px;
background-color: white;
display: block;
}
/* Horizontal list */
#navigation ul {
padding-top: 5px;
list-style-type: none;
text-align: center;
width: 960px
}
/* Horizontal list items */
#navigation li {
display: inline-block;
text-transform: uppercase;
vertical-align: middle;
}
/* Horizontal list link */
#navigation a {
height: 25px;
width: auto;
display: block;
line-height: 15px;
text-align: center;
vertical-align: middle;
text-decoration: none;
color: black;
padding-left: 8px;
padding-right: 8px;
}
/* Horizontal list hover attribute */
#navigation a:hover {
color: Darkgrey;
}
/* Content div */
#wrapper #content {
display: inline-block;
height: auto;
width: 950px;
background-color: white;
padding-left: 10px;
padding-right: 0px;
}
/* Content headings */
#content h2 {
text-transform: capitalize;
padding: 10px;
}
/* Content image(global) */
#content img {
padding: 2px;
border-width: 1px;
margin: 10px;
margin-left: 20px;
Margin-right: 15px;
}
/* Content bullet list */
#content ul {
padding: 15px;
font-size: small;
margin-left: 10px;
}
/* Content paragraph text */
#content p {
padding-left: 10px;
font-size: small;
}
/* Content image */
#content #img1 {
float: left;
border-style: dashed;
}
/* Content image */
#content #img2 {
float: right;
border-style: solid;
border-width: 1px;
border-color: #BDA27E;
}
/* Content image */
#content #img3 {
float:left;
border-style:double;
margin-top: 20px;
margin-left: 8px;
border-width: 5px;
border-color: #996633;
}
/* Side menu div*/
#wrapper #content #menu {
float: right;
padding: 0px;
margin: px;
width: 220px;
height: 1118px;
}
/* Side menu*/
#menu ul {
list-style-type: none;
float: right;
text-align: right;
width: 170px
}
#menu li {
background-image: url('../images/pg_menu_bg.png');
}
/* Side menu link */
#menu a {
height: 30px;
display: block;
vertical-align: middle;
text-decoration: none;
color: black;
font-size: small;
padding-top: 8px;
margin-left: 10px;
margin-right: 0px;
}
/* Side menu hover attribute */
#menu a:hover {
color: darkgrey;
}
/* Footer div */
#wrapper #footer {
height: 40px;
background-color: #82AAF1;
width: 960px;
margin: 0px, auto;
position: relative;
bottom: 0;
}
/* Foot note */
#footer p {
text-align: center;
color: #6A1B1B;
padding-top: 15px;
font-size: 10px;
}
.padext {
padding-top:2px
}
Sorry i am still a beginner.
Thank you for you time.
If you HTML is like this:
<body>
<div id="wrapper">
<div id="header"></div>
<div id="content"></div>
<div id="footer"></div>
</div>
apply the following CSS.
#wrapper {
min-height:100%;
position:relative;
}
#content {
padding:10px;
padding-bottom:80px; /* Height of the footer element */
}
The padding-bottom of the #content is set as the height of the footer.
#footer {
width:100%;
height:80px;
position:absolute;
bottom:0;
left:0;
}
I recommend you to refer the following link : How To Keep Your Footer At The Bottom Of The Page With CSS
I have a ul inside a div. I want to center it. Here is the fiddle
HTML
<div id="menu-top">
<div id="menu-container">
<div id="menu-mask">
<ul id="menu">
<li>Home</li>
<li>Home</li>
<li>Home</li>
<li>Home</li>
<li>Home</li>
</ul>
</div>
</div>
</div>
CSS
body {
background-color: #000;
overflow: hidden;
}
#menu-top {
position: absolute;
display: block;
width: 100%;
height: 26px;
top: 0px;
z-index: 9;
}
#menu-container {
width: 840px;
margin: auto;
}
#menu-mask {
display: inline-block;
height: 26px;
margin: auto;
overflow: hidden;
position: relative;
top: 0;
width: 800px;
}
#menu {
position: absolute;
display: block;
left: 0px;
top: 0px;
height: 26px;
margin: auto;
padding: 0px;
width: 100%;
}
#menu li {
padding-right: 20px;
clear: none;
float: left;
display: inline;
}
#menu li a {
font-size: 12px;
line-height: 26px;
letter-spacing: 1.5px;
color: #fff;
text-decoration: none;
text-transform: uppercase;
}
Here you go... change your #menu to this:
#menu {
position: absolute;
display: block;
margin-left:25%;
margin-right:25%;
margin-top:auto;
margin-bottom:auto;
top: 0px;
height: 26px;
padding: 0px;
width: 100%;
}
The margin-left and margin-right settings will center your menu on the page. I gave this a quick test in your JSFiddle to make sure it works.
Oh, and here's the updated JSFiddle showing the changes...
http://jsfiddle.net/LyJz9/7/
You can probably use text-align:center for what you are trying to do.
The div class circle renders on the right had page but even adding margin:0 auto; nothing works it just stays there what gives.
Here is my html/php
<?php
/*
Template Name: Home Page
*/
?>
<?php get_header(); ?>
<div id="content">
<header>
<h1><span class="tech">TECH</span><span class="basics">BASICS</span></h1>
<h2>Personal Tech Specialists</h2>
</header>
<div class="circle"></div>
</div> <!-- end #content -->
<?php get_footer(); ?>
Here is my css
html {
font-size: 16px;
}
body {
background: #BAE4FF;
font-family: "Open Sans", sans-serif;
}
nav {
position: absolute;
width: 100%;
left: 0;
top: 0;
text-align: center;
font-weight: 400;
}
nav .menu {
list-style-type: none;
padding: 0;
margin: 0;
}
nav .menu li {
padding: 3px 0 3px 0;
display: none;
}
nav .menu li a {
text-decoration: none;
color: #fff;
font-size: 2.1em;
}
nav .menu .blog {
background: #1669B5;
}
nav .menu .contact {
background: #3892E3;
}
nav #touchNav {
background: #48B4EF;
width: 100%;
display: block;
color: #fff;
font-size: 2.1em;
padding: 3px 0 3px 0;
text-decoration: none;
}
header {
margin: 50px 0 0 0;
margin-top: 50px;
text-align: center;
width: 100%;
}
header h1 {
margin: 0 auto;
width: 100%;
}
header h1 .tech {
color: #fff;
font-weight: 500;
margin-right: 3.5px;
font-size: 1.1em;
}
header h1 .basics {
color: #48B5EF;
margin-left: 3.5px;
font-size: 1.3em;
}
header h2 {
font-size: 2.1em;
font-weight: 100;
width: 100%;
margin: 0 auto;
color: #fff;
line-height: 1.2em;
}
.circle {
margin-top: 100px;
clear: both;
width: 20px;
height: 20px;
background: #48B5EF;
-moz-border-radius: 10px;
-webkit-border-radius: 10px;
border-radius: 10px;
margin: 0 auto;
}
try to add position tag.. u can use fixed as position or relative whatever suits your needs.. to the .circle class.
Your circle class margins are funny.
Try this instead:
.circle {
margin-top: 100px;
margin-left: auto;
margin-right: auto;
clear: both;
width: 20px;
height: 20px;
background: #48B5EF;
-moz-border-radius: 10px;
-webkit-border-radius: 10px;
border-radius: 10px;
}
http://jsfiddle.net/q5w3G/1/
One should think that this will work too but trust the first one more:
.circle {
margin: 0 auto;
margin-top: 100px;
clear: both;
width: 20px;
height: 20px;
background: #48B5EF;
-moz-border-radius: 10px;
-webkit-border-radius: 10px;
border-radius: 10px;
}
http://jsfiddle.net/q5w3G/2/
CSS means Cascading style sheets. Cascading means that if one property is defined two or more times for the same element then the property read last is applied. So if you define margin on circle, then again latter in the same style sheet, then again later in a second style sheet with its rel link after the first in the head section, then in the head section itself after the rel links in a style tag, then again inline on the element itself, then the inline value is used. In fact that is the order they are used.
it would be beeter to have an example of page when you ask about css,
but here is the real problem for you
in css margin top does not work as you expect.
its not making a space on the top of your elements unless all the elements be in the same parent z-index (or simpler i mean they all have one parent) i.e all li's within a ul.
the top margin affects space between li's not between li and ul.
for making that you should give the ul a padding-top.
Hope it helps
I manage the website for a small college library and am trying to create a bubble tooltip for an images that are part of a slider. Here's the link to the page to show you what I mean:
http://library.sfc.edu/webvoy3.htm. If you hover over the first image in the slider, you will see the tooltip stuck in there. There's no JavaScript for this tooltip, only CSS. I got the code from http://trentrichardson.com/examples/csstooltips/.
This is the CSS part of the tooltip:
a.tt{
position:relative;
z-index:24;
color:#3CA3FF;
font-weight:bold;
text-decoration:none;
}
a.tt span{ display: none; }
a.tt:hover{ z-index:25; color: #aaaaff; background:;}
a.tt:hover span.tooltip{
display:block;
position:absolute;
top:0px; left:0;
padding: 15px 0 0 0;
width:200px;
color: #993300;
text-align: center;
filter: alpha(opacity:90);
KHTMLOpacity: 0.90;
MozOpacity: 0.90;
opacity: 0.90;
}
a.tt:hover span.top{
display: block;
padding: 30px 8px 0;
background: url(images/bubble.gif) no-repeat top;
margin-top: 20px;
}
a.tt:hover span.middle{ /* different middle bg for stretch */
display: block;
padding: 0 8px;
background: url(images/bubble_filler.gif) repeat bottom;
}
a.tt:hover span.bottom{
display: block;
padding:3px 8px 10px;
color: #548912;
background: url(images/bubble.gif) no-repeat bottom;
}
This is the CSS of the SLIDER
#slider {
width: 450px;
position: relative;
height:inherit;
float:left;
padding-right:45px;
margin-left: 8px;
}
#slider .buttons span {
display: block;
width: 38px;
height: 38px;
font-size: 0;
line-height: 0;
text-indent: -4000px;
cursor: pointer;
}
#slider .buttons span {
position: absolute;
top: 32px;
}
#slider .buttons .prev {
left: -5px;
background: url(images/button-prev.gif) no-repeat 0 0;
}
#slider .buttons .next {
right: 16px;
background: url(images/button-next.gif) no-repeat 0 0;
}
#slider .holder {
width: 400px;
height: 110px;
position: relative;
overflow: hidden;
left:40px;
margin-right: 5px;
padding-right: 0px;
padding-top: 9px;
background: url(images/back-slider.jpg) no-repeat 0 0;
}
#slider .content ul {
position:relative;
list-style-type:;
height:112px;
width: 450px;
overflow:hidden;
padding-right: 10px;
padding-top: 5px;
}
#slider .content ul li {
float: left;
display: inline;
list-style-type: none;
margin-left: 16px;
height:133px;
overflow:hidden;
width:80px;
}
#slider .content ul li a {
display:block;
width: 74px;
height: 97px;
padding-left: 3px;
padding-top: 4px;
background: url(images/slider-fragment.gif);
}
AND THIS IS THE HTML CODE
<div id="slider">
<div class="buttons">
<span class="prev">prev</span>
<span class="next">next</span>
</div>
<div class="holder">
<div class="content">
<ul>
<li>
<a href="http://library.sfc.edu:7008/vwebv/holdingsInfo?bibId=261454" class="tt">
<img src="css/css-eb/images/covers/cover1.png" />
<span class="tooltip">
<span class="top"></span>
<span class="middle">This is my Bubble Tooltip with CSS</span>
<span class="bottom"></span>
</span>
</a>
</li>
</ul>
</div>
</div>
</div>
The problem seems to be the incompatibility the tooltip's CSS with the slider's CSS.
Any suggestion or advice would be greatly appreciated.
Just remove overflow: hidden from #slider .content ul li - works for me when I do this live via Developer Tools.
Please Remove the overflow:hidden for the class #slider .content ul li
#slider .content ul li {
float: left;
display: inline;
list-style-type: none;
margin-left: 16px;
height: 133px;
width: 80px;
}