This is sort of the same issue I asked here: Cannot get two CSS elements to be next to each other
However, this time, it's messing up when I added an iframe. I tried applying different styles, even to the iframe, but it doesn't appear to be working. I also messed with the CSS of the ul and li that I added to the side nav bar (didn't help, though changing the ul property to display: table-row; did fix another issue I had with something else.)
My main plan was to have an iframe to another group of pages. (My restaurant pages might have more than one tab for each restaurant, but I had been wondering how to have a "back" thing to my ski resort (where the restaurants are) so the user could go back to them. I then thought, why not just have an iframe instead?
However, once I added the iframe, the trouble I had before (see previous stack overflow link above) suddenly came back.
main.css:
#logo
{
border: 1px dashed purple;
width: 1050;
height: 75;
}
#logo > img
{
width: 1050;
height: 75;
}
.floatleft
{
float: left;
}
.floatright
{
float: right;
}
#content
{
border-left: 3px solid #283379;
border-right: 3px solid #283379;
text-align: left;
margin: 0 auto;
width: 960px;
background-color: #ffffff;
background-repeat: repeat-y;
height: 800;
}
nav
{
border: 10px solid transparent;
padding: 15px;
border-image-source: url(./blue-diamond.gif);
border-image-repeat:repeat;
border-image-slice: 30;
background-color: 2211ff;
font-family: "Impact", Times, serif;
font-size: 110%;
}
nav#vert
{
width: 220px;
height: 540px;
margin: 0px;
display:table-cell;
}
body {
color: #000000;
margin: 0;
padding: 0;
font-family: Helvetica, Arial, sans-serif;
font-size: 16px;
background-color: #422520;
background-image: url(./snow_mountain.jpg);
background-repeat:no-repeat;
background-size:cover;
text-align: center;
background-attachment: fixed;
background-position: center;
}
#footerContainer
{
border-left: 3px solid #283379;
border-right: 3px solid #283379;
text-align: left;
margin: 0 auto;
width: 980px;
background-color: #ffffff;
background-repeat: repeat-y;
}
footer
{
border: 10px solid transparent;
padding: 15px;
text-align: left;
margin: 0 auto;
width: 1000px;
background-repeat: repeat-y;
border-image-source: url(./blue-diamond.gif);
border-image-repeat:repeat;
border-image-slice: 30;
background-color: 2211ff;
font-family: "Impact", Times, serif;
font-size: 14px;
color: white;
}
footer > a
{
color: white;
font-family: "Impact", Times, serif;
font-size: 14px;
}
#container
{
border-left: 3px solid #283379;
border-right: 3px solid #283379;
text-align: left;
margin: 0 auto;
width: 1050px;
background-color: #ffffff;
background-repeat: repeat-y;
height: 750px;
}
nav > a
{
color: #ccccff;
}
nav#hor > div
{
border: 1px solid white;
float: left;
padding: 10px;
background-color: #000044;
}
nav#hor
{
width: 1000px;
height: 50px;
margin: 0;
font-size: 110%;
}
nav#hor a
{
color: rgb(0 0,238);
}
nav#hor > div > a
{
color: #ccccff;
text-decoration: none;
font-size: 100%;
}
nav#hor>div:hover
{
background-color: #018802;
}
h1
{
font-family: "MV Boli", Times, Serif;
font-style: bold;
text-align: center;
font-size: 36px;
}
h2
{
font-family: "MV Boli", Times, Serif;
font-style: bold;
text-align: center;
font-size: 26px;
}
h3
{
font-family: "MV Boli", Times, Serif;
font-style: bold;
text-align: center;
font-size: 20px;
}
#text-container
{
border: 2px solid cyan;
width: 1005px;
height: 690px;
*/ zoom: 1;
*/ margin: 0;
display: table-cell;
padding-top: 10px;
padding-right: 10px;
padding-bottom: 10px;
padding-left: 10px;
}
#text-container:after
{
clear: both;
content: ".";
display: block;
height: 0;
visibility:hidden;
}
#text-container > p
{
font-family: "Myriad Web Pro", Times, Serif;
font-size: 18px;
}
.left img
{
float: left;
padding: 0 20px 20px 0;
}
.left > p
{
font-family: "Myriad Web Pro", Times, Serif;
font-size: 18px;
}
.right img
{
float: right;
margin: 0px 0px 15px 20px;
border: 1px solid transparent;
}
.right > p
{
font-family: "Myriad Web Pro", Times, Serif;
font-size: 18px;
}
nav#hor ul
{
list-style-type: none;
margin: 0;
padding: 0;
overflow: auto;
background-color: #000044;
}
nav#hor ul li:hover
{
background-color: #018802;
}
nav#vert ul
{
list-style-type: none;
margin: 0;
padding: 0;
overflow: auto;
background-color: #000044;
display: table-row;
}
nav#hor li
{
float: left;
border: 1px solid white;.
}
nav#vert li
{
float: left;
border: 1px solid white;.
}
nav#vert li a, .dropbtn {
display: inline-block;
// color: white;
text-align: center;
padding: 8px 8px;
text-decoration: none;
}
nav#hor li a, .dropbtn {
display: inline-block;
// color: white;
text-align: center;
padding: 8px 8px;
text-decoration: none;
}
nav#hor li a:hover, .dropdown:hover .dropbtn {
background-color: #018802;
}
nav#vert li a:hover, .dropdown:hover .dropbtn {
background-color: #018802;
}
li.dropdown {
display: inline-block;
}
.dropdown-content ul li
{
width: 100%;
}
.dropdown-content {
display: none;
position: absolute;
background-color: #f9f9f9;
min-width: 160px;
box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
color: rgb(0, 0, 238);
z-index: 1;
}
#eAndADropdown
{
}
#restaurantDropdown li
{
background-color: #000044;
border: 1px solid white;
}
#restaurantDropdown ul
{
border: 1px solid white;
}
#restaurantDropdown:hover
{
background-color: #018802;
}
#restaurantDropdown a
{
color: rgb(0, 0, 238);
}
.dropdown-content a {
color: rgb(0, 0, 238);
border: 1 px solid white;
padding: 12px 16px;
text-decoration: none;
display: block;
text-align: left;
}
.dropdown-content a:hover {background-color: #f1f1f1}
.show {display:block;}
li a
{
color: rgb(0, 0, 238);
}
testingMongoose.php
<html>
<head>
<title> The Mountains </title>
<link rel="stylesheet" type="text/css" href="./main.css">
<link rel="icon" href="./ski_icon.png">
<script src="jquery-3.0.0.min.js" type="text/javascript"></script>
<script>
$( document ).ready(function() {
$("#container").css("height", 800);
});
</script>
</head>
<body>
<?php include 'topandside.php';?>
<div id="text-container">
<iframe src="./index.php" width=700; height=620;></iframe>
</div>
</div>
</div>
<?php include 'footer.php';?>
</div>
</body>
</html>
This time, having display: table-cell; for both nav#vert and #text-content doesn't appear to be enough like it was before.
float: left on the nav#vert seems to have fixed that issue, though it broke some other things (though I should be able to fix those.)
im wondering how to write my css so that when i hover the text the green line under the yellow box becomes yellow as well. thank you
ul {
list-style-type: none;
margin: 0;
padding: 0;
overflow: hidden;
border-bottom: 2px solid green;
}
#left {
float: left;
}
#right {
float: right;
}
a {
display: block;
color: black;
text-align: center;
padding: 12px 12px;
text-decoration: none;
}
a:hover {
background-color: yellow;
}
link
https://jsfiddle.net/18fk9sce/
i should add that i wish the green line to remain. some solutions seem to remove the green line running across the page.
Okay, I've just updated the solution now.
Just replace the overflow: hidden; in ul with a fixed height: 42px. And increase the padding bottom of the hovered link by 2px (i.e the border-bottom size). That would cover the border with yellow color of the link.
Check the updated fiddle
ul {
list-style-type: none;
margin: 0;
padding: 0;
height: 42px;
border-bottom: 2px solid green;
}
#left {
float: left;
}
#right {
float: right;
}
a {
display: block;
color: black;
text-align: center;
padding: 12px 12px;
text-decoration: none;
}
a:hover {
background-color: yellow;
padding-bottom: 14px;
}
HTML - added wrapper
<div class="menu__holder">
<ul class="main_menu_left">
<li id="left">Homehome</li>
<li id="left">Homehomehome</li>
<li id="left">Homehome</li>
<li id="right">Homehome</li>
<li id="right">Home</li>
</ul>
</div>
CSS
.menu__holder {
width: 100%;
padding: 0;
border-bottom: 2px solid green;
}
ul {
list-style-type: none;
margin: 0;
padding: 0;
overflow: hidden;
z-index: 9999;
margin-bottom: -2px;
}
ul li {
border-bottom: 2px solid transparent;
}
ul li:hover {
border-color: yellow;
z-index: 9999;
}
#left {
float: left;
}
#right {
float: right;
}
a {
display: block;
color: black;
text-align: center;
padding: 12px 12px;
text-decoration: none;
}
a:hover {
background-color: yellow;
}
Updated fiddle - NEW
You have to set the border in the li not in ul, so you can separately change the border.
Just change the Style to achieve it:
Updated fiddle
Updated Style
ul {
list-style-type: none;
margin: 0;
padding: 0;
overflow: hidden;
}
#left {
float: left;
}
#right {
float: right;
}
a {
display: block;
color: black;
text-align: center;
padding: 12px 12px;
text-decoration: none;
}
li{
border-bottom: 2px solid green;
}
li:hover {
background-color: yellow;
border-bottom: none;//you can set other color here
}
Updated CSS :-
ul {
list-style-type: none;
margin: 0;
padding: 0;
overflow: hidden;
}
#left {
float: left;
}
#right {
float: right;
}
a {
display: block;
color: black;
text-align: center;
padding: 12px 12px;
text-decoration: none;
border-bottom: 2px solid green;
}
a:hover {
background-color: yellow;
border-bottom: 2px solid yellow;
}
try with adding this to your css.if this is not the case tell me
ul:hover{
border-bottom:1px solid yellow;
}
thanks to everyone who contributed to this question.
in the end this is the code i use.
https://jsfiddle.net/4d0ghscu/
<style>
.menu{
height:40px;
border-bottom:4px solid green;
padding:0;}
.menu_left{
display:inline;
list-style-type:none;}
.menu_right{
display:inline;
list-style-type:none;}
.tab_left{
float:left;}
.tab_right{
float:right;}
a{
display:block;
color:black;
padding:12px 12px;
text-decoration:none;}
a:hover{
background-color:yellow;}
</style>
<ul class="menu">
<ul class="menu_left">
<li class="tab_left">Homehome</li>
<li class="tab_left">Homehomehome</li>
<li class="tab_left">Homehome</li>
</ul>
<ul class="menu_right">
<li class="tab_right">Homehome</li>
<li class="tab_right">Home</li>
</ul>
</ul>
key to the code:
*separating left from right within an overhead. which made it simpler and more flexible to add new elements to the navigation menu.
*adding height.
I want to change a color of the main menu background in classical free Drupal 7 theme. It is in orange, I want to make it in the other color (dark blue or green). This is the Drupal repository for the themes
I could not locate the necessary CSS code block to change. I have read theme guides, color schemes and books on it, not clear yet. The orange color there starts with ff...
Please advise how to do it.
Here is the CSS original code:
#font-face {
font-family: 'BebasNeueRegular';
src: url('fonts/BebasNeue-webfont.eot');
src: url('fonts/BebasNeue-webfont.eot?#iefix') format('embedded-opentype'),
url('fonts/BebasNeue-webfont.woff') format('woff'),
url('fonts/BebasNeue-webfont.ttf') format('truetype'),
url('fonts/BebasNeue-webfont.svg#BebasNeueRegular') format('svg');
font-weight: normal;
font-style: normal;
}
#font-face {
font-family: 'YanoneKaffeesatzRegular';
src: url('fonts/YanoneKaffeesatz-Regular-webfont.eot');
src: url('fonts/YanoneKaffeesatz-Regular-webfont.eot?#iefix') format('embedded-opentype'),
url('fonts/YanoneKaffeesatz-Regular-webfont.woff') format('woff'),
url('fonts/YanoneKaffeesatz-Regular-webfont.ttf') format('truetype'),
url('fonts/YanoneKaffeesatz-Regular-webfont.svg#YanoneKaffeesatzRegular') format('svg');
font-weight: normal;
font-style: normal;
}
/* Deafults */
/* Default Style
--------------------------------*/
html, body, div, span, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
abbr, address, cite, code,
del, dfn, em, img, ins, kbd, q, samp,
small, strong, sub, sup, var,
b, i,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, figcaption, figure,
footer, header, hgroup, menu, nav, section, summary,
time, mark, audio, video {
margin:0;
padding:0;
border:0;
outline:0;
font-size:100%;
vertical-align:baseline;
background:transparent;
}
article,aside,details,figcaption,figure,
footer,header,hgroup,menu,nav,section {
display:block;
}
nav ul {
list-style:none;
}
blockquote, q {
quotes:none;
border: 1px solid #bbbbbb;
background: rgb(241, 241, 241) url(images/quote.png) no-repeat;
padding: 10px 5px 5px 47px;
text-shadow: 1px 1px #fff;
margin: 5px 0;
border-radius: 7px;
}
blockquote:before, blockquote:after,
q:before, q:after {
content:'';
content:none;
}
pre {
background: #d8d8d8;
text-shadow: 1px 1px #fff;
border: 1px solid #bbbbbb;
padding: 7px;
margin: 5px 0;
border-radius: 7px;
}
code {
background: rgb(240, 240, 240);
text-shadow: 1px 1px #fff;
border: 1px solid #bbbbbb;
display: block;
padding: 7px;
margin: 5px 0;
border-radius: 7px;
}
ins {
background-color:#fdfc9b;
text-decoration:none;
}
mark {
background-color:#fdfc9b;
font-style:italic;
font-weight:bold;
}
del {
text-decoration: line-through;
}
abbr[title], dfn[title] {
border-bottom:1px dotted;
cursor:help;
}
hr {
height:1px;
background: #9f9f9f;
margin: 7px 0;
border: none;
clear: both;
float: none;
width: 100%;
}
input, select {
vertical-align:middle;
}
select {
border-radius: 4px;
border: 1px solid #ACACAC;
padding: 3px 4px;
}
.clear {
clear: both;
}
.clearfix:after {
display: block;
visibility: hidden;
content: ".";
clear: both;
text-indent: -9999px;
height: 0;
}
.remove-margin {
margin-right: 0 !important;
}
fieldset {
border: 1px solid #ccc;
margin: 0 0 1.4615em;
padding: 1.5385em;
}
table {
border-collapse:collapse;
border-spacing:0;
margin-bottom: 15px;
width: 100%;
}
th, tr, td {
vertical-align: middle;
}
.sticky-header th, .sticky-table th {
border-bottom: 3px solid #ccc;
padding-right: 1em;
text-align: left;
}
body {
margin:0 auto;
padding:0;
font-family:Tahoma,Georgia,Arial,sans-serif;
font-size:13px;
background:url(images/body_bg.png) repeat-x center top #fff;
line-height:1.5em;
}
a {
text-decoration: none;
color: #0593C7;
-webkit-transition: color 0.2s ease-in-out;
-moz-transition: color 0.2s ease-in-out;
-o-transition: color 0.2s ease-in-out;
-ms-transition: color 0.2s ease-in-out;
transition: color 0.2s ease-in-out;
}
a:hover {
text-decoration: none;
color: #0579A4;
}
p {
margin: 0 0 0.8em;
}
strong {
font-weight: 700;
}
em {
font-style: italic;
}
h1,h2, h3, h4, h5, h6 {
line-height:125%;
font-weight: normal;
}
h1 {
font-size: 26px;
}
h2 {
font-size: 21px;
}
h3 {
font-size: 19px;
}
h4 {
font-size: 17px;
}
h5 {
font-size: 15px;
}
h6 {
font-size: 13px;
}
.clear {
clear:both;
}
/* The Outer cover */
#wrapper {
width:1000px;
margin:0px auto;
}
#content-container{
padding:0px;
width:100%;
}
/* TOP */
#header-top{
margin:0px auto;
position:relative;
height:100%;
}
.logo{
float: left;
width:300px;
}
.logo #logoimg {
float:left;
height: 55px;
margin:0;
padding:0 12px 0 0;
}
.logo #logoimg img{
width: 100%;
height: 100%;
}
.logo .sitename {
float:left;
}
.logo .sitename h1{
font-size:32px;
font-family:BebasNeueRegular,Arial, serif;
font-weight:normal;
margin: 10px 0;
}
.logo .sitename h1 a:link, .logo .sitename h1 a:visited{
color:#f25409;
}
.logo .sitename h1 a:hover{
color:#666;
}
.logo .sitename h2 {
color:#888;
font-size: 10px;
position: relative;
top: -18px;
font-weight:normal;
}
/* Social bookmarks */
.social-icons {
float: right;
margin-top: 10px;
}
.social-icons li {
float: left;
font-size: 11px;
margin: 3px 5px;
padding:0px;
text-transform: uppercase;
list-style: none;
}
/* PRIMARY NAVIGATION */
#menu-container{
height:55px;
text-transform:uppercase;
clear:both;
border-top:1px solid #fff;
border-bottom:1px solid #fff;
padding: 0 0 0 10px;
background:#fff;
}
#main-menu {
float: right;
width:660px;
margin: 0 auto 0;
overflow: hidden;
}
#main-menu ul {
float: right;
list-style: none;
margin: 0;
padding: 0;
}
#main-menu li {
float: left;
list-style: none;
margin: 0;
padding: 0;
line-height:40px;
font-family:BebasNeueRegular,Arial, serif;
font-size:18px;
}
#main-menu li a {
color: #45565a;
display: block;
margin: 0;
padding: 8px 20px;
text-decoration: none;
position: relative;
border-right: 1px solid #E7EEF0;
}
#main-menu li:last-child a{
border:0;
}
#main-menu li a:hover, #main-menu li a:active, #main-menu .active-trail a, #main-menu li a.active {
color: #fff;
background: #fe5c11;
}
#main-menu li a.sf-with-ul {
padding-right: 10px;
}
#main-menu li a .sf-sub-indicator {
display: block;
width: 10px;
height: 10px;
text-indent: -9999px;
overflow: hidden;
position: absolute;
top: 19px;
right: 5px;
}
#main-menu li li a, #main-menu li li a:link, #main-menu li li a:visited {
background: #444;
color: #ddd;
width: 148px;
font-family: Arial, Tahoma, Verdana;
margin: 0;
padding: 3px 10px;
line-height:30px;
border-left: 1px solid #333;
border-right: 1px solid #333;
border-bottom: 1px solid #333;
text-transform: none;
position: relative;
font-size:12px;
}
#main-menu li li a:hover, #main-menu li li a:active {
background: #4a4a4a;
color: #fff;
}
#main-menu li li a .sf-sub-indicator {
top: 10px;
}
#main-menu li ul {
z-index: 9999;
position: absolute;
left: -999em;
height: auto;
width: 170px;
margin: 1px 0px 0px 0px;
padding: 0;
}
#main-menu li ul a {
width: 150px;
}
#main-menu li ul a:hover, #main-menu li ul a:active {
}
#main-menu li ul ul {
margin: -31px 0 0 169px;
}
#main-menu li:hover ul ul, #main-menu li:hover ul ul ul, #main-menu li.sfHover ul ul, #main-menu li.sfHover ul ul ul {
left: -999em;
}
#main-menu li:hover ul, #main-menu li li:hover ul, #main-menu li li li:hover ul, #main-menu li.sfHover ul, #main-menu li li.sfHover ul, #main-menu li li li.sfHover ul {
left: auto;
}
#main-menu li:hover, #main-menu li.sfHover {
position: static;
}
/* HOME PAGE */
#slider{
position:relative;
width:900px;
margin:50px auto 25px;
padding-bottom:20px;
}
#front-welcome{
text-align:center;
padding:20px 0 0 0;
font-family:"YanoneKaffeesatzRegular",arial;
margin-bottom:-30px;
}
#front-welcome .block > h2{
color:#282c2f;
font-size:28px;
margin:0px auto;
font-family:"YanoneKaffeesatzRegular",arial;
font-weight:normal;
text-transform: none;
}
#front-welcome p{
padding:10px 0px;
color:#282c2f;
line-height:22px;
font-size:18px;
font-family:"YanoneKaffeesatzRegular",arial;
}
/*------------------------------------------------*/
#page-container{
float: left;
margin: 0 auto;
width: 95%;
overflow: hidden;
-moz-box-sizing: border-box;
-webkit-box-sizing: border-box;
box-sizing: border-box;
}
.not-front #page-container{
background: white;
padding: 20px;
border: 1px solid #DDD;
width: 100%;
}
#content {
display: inline;
margin: 0;
}
/* 3 columns */
body.two-sidebars #content {
float: left;
margin: 0 0 0 25px;
padding: 0;
width: 495px;
}
/* 2 columns: sidebar-first */
body.sidebar-first #content {
float: right;
margin: 0;
padding: 0;
width: 725px;
}
/* 2 columns: sidebar-second */
body.sidebar-second #content {
float: left;
margin: 0;
padding: 0;
width: 675px;
}
body.two-sidebars #sidebar-first {
float: left;
margin: 0;
padding: 0;
width: 200px;
}
/* 3 columns: sidebar-second */
body.two-sidebars #sidebar-second {
float: right;
margin: 0;
padding: 0;
width: 200px;
}
/* 2 columns: sidebar-first */
body.sidebar-first #sidebar-first {
float: left;
margin: 0;
padding: 0;
width: 200px;
}
/* 2 columns: sidebar-second */
body.sidebar-second #sidebar-second {
float: right;
margin: 0;
padding: 0;
width: 200px;
padding-left: 20px;
min-height: 330px;
-webkit-box-shadow: -2px 1px 2px #DDD;
-moz-box-shadow: -2px 1px 2px #DDD;
-o-box-shadow: -2px 1px 2px #DDD;
box-shadow: -2px 1px 2px #DDD;
}
.node {
margin-bottom: 20px;
padding-bottom: 20px;
}
#preface-wrapper {
margin: 0 auto;
}
#preface-wrapper .column {
float: left;
}
#preface-wrapper.in1 .column {
width: 100%;
}
#preface-wrapper.in2 .column {
width: 50%;
}
#preface-wrapper.in3 .column {
width: 33.3%;
}
#preface-wrapper .block {
padding-left: 15px;
padding-right: 15px;
}
#bottom-wrapper {
margin: 10px auto 0;
text-align: left;
width: 930px;
}
#bottom-wrapper .column {
float: left;
padding-bottom: 15px;
}
#bottom-wrapper.in1 .column {
width: 100%;
}
#bottom-wrapper.in2 .column {
width: 50%;
}
#bottom-wrapper.in3 .column {
width: 33.3%;
}
#bottom-wrapper.in4 .column {
width: 25%;
}
#bottom-wrapper .block {
padding-left: 15px;
padding-right: 15px;
}
.bottom{
clear: both;
background:#f4f4f4;
padding:10px 0px;
}
.bottom-container{
margin: auto;
width: 930px;
}
.bottom-container .column {
float: left;
}
.bottom-container.in1 .column {
width: 100%;
}
.bottom-container.in2 .column {
width: 50%;
}
.bottom-container.in3 .column {
width: 33.3%;
}
.bottom-container .block {
padding-left: 15px;
padding-right: 15px;
margin-bottom: 0;
}
.bottom-container p{
padding:5px 0px;
color:#555;
line-height:20px;
}
#footer{
float: left;
padding:10px 0px;
overflow:auto;
font-family:Arial;
color:#777;
background: #d9e0e3;
border:1px solid #cfd7db;
width: 100%;
}
#footer #block-system-powered-by{
margin: 10px 0 0 0;
}
.footer_wrapper{
width: 930px;
margin: 0 auto;
overflow: hidden;
}
.credit{
float:right;
margin:10px 0px;
}
.copyright{
float:left;
margin:10px 0px;
width:400px;
}
.block > h2{
font-family:BebasNeueRegular,Arial, serif;
padding: 0px 0px 4px 0px;
color:#555;
font-size:24px;
font-weight:normal;
margin:5px 0px;
text-transform:uppercase;
border-bottom: 1px solid #ccc;
}
.sidebar .block{
float:left;
width:200px;
font-size:12px;
margin:0px 0px 30px 0px;
display:inline;
overflow:hidden;
}
.block{
margin:0px 0px 30px 0px;
overflow: hidden;
}
.node h2.title, #page-title{
color: #555555;
font-family: BebasNeueRegular,Arial,serif;
font-size: 24px;
font-weight: normal;
padding: 0 0 10px;
}
.node h2.title a{
color: #555555;
}
.content {
color: #333333;
}
/* Slideshow */
#slideshow {
position: relative;
width: 100%;
overflow: hidden;
margin: 20px 0 40px 0;
float: left;
}
#slides {
clear: both;
position: relative;
width: 900px;
margin: auto;
}
.slides_container {
width: 841px;
height: 320px;
overflow: hidden;
position: relative;
z-index: 1;
border: 5px solid white;
margin: 0 auto;
-webkit-box-shadow: 0px 0px 26px #999;
-moz-box-shadow: 0px 0px 26px #999;
-o-box-shadow: 0px 0px 26px #999;
box-shadow: 0px 0px 26px #999;
}
.slides_container a,
.slides_container img {
display: block;
width:840px;
}
#slides .next,
#slides .prev{
position: absolute;
top: 127px;
left: -21px;
width: 78px;
height: 83px;
margin: 0;
background: url(images/slider_arrow.png) -10px -23px;
z-index: 10;
}
#slides .prev{
left: 833px;
background: url(images/slider_arrow.png) -10px 119px;
}
.slides_nav {
display: block !important;
}
#slides ul.pagination {
border: 0;
position: absolute;
z-index: 10;
margin: -25px 0 0 15px;
bottom: 16px;
right: 32px;
}
#slides ul.pagination li {
float:left;
margin: 0 10px 0 0;
list-style:none;
}
#slides ul.pagination li a {
display:block;
width:12px;
height:0;
padding-top:12px;
background: url(images/slides_arrows.png) 0 160px;
float:left;
overflow:hidden;
}
#slides ul.pagination li.current a {
background: url(images/slides_arrows.png) 188px 160px;
}
.submitted {
padding: 4px 9px 4px 0px;
border-radius: 4px;
color: #fe5c11;
clear: both;
display: block;
font-size: 11px;
margin-bottom: 2px;
font-style: italic;
}
footer .links{
font-size: 12px;
}
.links {
color: #000;
margin-top: 10px;
font-size: 14px;
}
.links li a {
background: #C0D8DD;
display: inline-block;
padding: 2px 5px;
border-radius: 4px;
color: #383838;
font-weight: normal;
margin-bottom: 2px;
}
.links li a:hover {
color: #B81007;
}
.content ul, .content ol {
padding-left:20px;
}
.content table {
background: #ececec;
border: 1px solid #bbbbbb;
}
.content th {
background: #dbdbdb;
padding: 5px 4px;
text-shadow: 1px 1px #fff;
border-right: 1px solid #c8c7c7;
}
.content td {
background: #ebebeb;
color: #747474;
text-align: left;
padding-left: 4px;
border-right: 1px solid #c8c7c7;
border-bottom: 1px solid #c8c7c7;
}
/*-------------------------------------------*
/* Fix CKEditor style
/*-------------------------------------------*/
#content-container table.cke_editor {
background: transparent;
border: 0;
}
#content-container table.cke_editor td {
background: transparent;
padding: 0;
border: 0;
}
/*-------------------------------------------*
/* Poll, Buttons, Form
/*-------------------------------------------*/
.poll .vote-form .choices .title {
font-size: 14px;
font-weight: normal;
line-height: 2;
}
.poll .vote-form .choices {
margin: 0;
}
input.form-checkbox, input.form-radio {
vertical-align: baseline;
}
.form-text {
border-radius: 3px;
border: 1px solid #acacac;
padding: 4px 5px;
}
/*-------------------------------------------*
/* Menus and item lists
/*-------------------------------------------*/
.item-list ul {
margin: 0;
padding: 0 0 0 1.5385em;
}
.item-list ul li {
margin: 0;
padding: 0;
}
ul.menu li {
margin: 0;
padding: 0;
}
ul.inline {
clear: both;
}
ul.inline li {
margin: 0;
padding: 0;
}
/*-------------------------------------------*
/* Admin Tabs
/*-------------------------------------------*/
.tabs-wrapper {
border-bottom: 1px solid #b7b7b7;
margin: 0 0 5px 0;
}
ul.primary {
border: none;
margin: 0;
padding: 0;
}
ul.primary li a {
background: none;
border: none;
display: block;
float: left;
line-height: 1.5385em;
margin: 0;
padding: 0 1em;
border-radius: 4px 4px 0 0;
margin-right: 5px;
}
ul.primary li a:hover, ul.primary li a.active {
background: #666;
border: none;
color: #fff;
}
ul.primary li a:hover {
background: #888;
text-decoration: none;
}
ul.secondary {
background: #666;
border-bottom: none;
clear: both;
margin: 0;
padding: 0;
}
ul.secondary li {
border-right: none;
}
ul.secondary li a, ul.secondary li a:link {
border: none;
color: #ccc;
display: block;
float: left;
line-height: 1.5385em;
padding: 0 1em;
}
ul.secondary li a:hover, ul.secondary li a.active {
background: #888;
color: #fff;
text-decoration: none;
}
ul.secondary a.active {
border-bottom: none;
}
/*-------------------------------------------*
/* Tabs and Tags
/*-------------------------------------------*/
.field-name-field-tags {
margin: 0 0 10px 0;
}
.field-name-field-tags a{
display: inline-block;
background: rgb(235, 235, 235);
padding: 1px 5px;
height: 22px;
color: #333;
text-shadow: 1px 1px #fff;
border-radius: 2px;
font-size: 12px;
}
.field-name-field-tags a:hover{
color: #205194;
}
.field-name-field-tags .field-item {
margin: 0 1em 0 0;
}
.field-name-field-tags div {
display: inline;
}
#content-container .field-label{
}
#content-container .field-items .field-item{
}
/*-------------------------------------------*
/* Profile
/*-------------------------------------------*/
.profile {
margin: 1.5385em 0;
}
.profile dd {
margin-bottom: 1.5385em;
}
.profile h3 {
border: none;
}
.profile dt {
margin-bottom: 0;
}
.password-parent {
width: 36em;
}
/*-------------------------------------------*
/* comment
/*-------------------------------------------*/
#comments {
clear: both;
margin-top: 14px;
padding: 10px;
border: 1px solid #dddddd;
border-radius: 8px;
background: rgb(253, 253, 253);
}
.comment {
margin-bottom: 1.5em;
padding: 5px;
border-radius: 7px;
min-height: 150px;
border-bottom: 1px solid #d9d9d9;
}
h3.comment-title a{
margin-bottom: 5px;
font-size: 16px;
color: #67696d;
}
.comment .new {
color: red;
text-transform: capitalize;
margin-left: 1em;
}
.form-textarea-wrapper textarea {
border-radius: 3px;
border: 1px solid #acacac;
}
.comment .submitted {
display:inline;
background: #e5e5e5;
}
.comment .user-picture{
float: left;
padding: 4px;
border: 1px solid #d9d9d9;
margin-right: 7px;
margin-bottom: 7px;
}
.comment-new-comments{
display: none;
}
/*-------------------------------------------*
/* Navigation
/*-------------------------------------------*/
.item-list .pager {
}
.item-list .pager li {
background: #cfcfcf;
border-radius: 3px;
margin-right: 4px;
text-shadow: 1px 1px #fff;
}
/*-------------------------------------------*
/* Forum
/*-------------------------------------------*/
.field-name-taxonomy-forums div {
display: inline;
margin-top: 4px;
}
.field-name-taxonomy-forums .field-items {
}
#forum .title {
font-size: 16px;
}
#forum .submitted {
font-size: 12px;
font-family: Lucida Grande, Verdana, Arial, sans-serif;
background: transparent;
padding: 0;
}
#forum .container {
background: #a1a1a1;
color: #fff;
}
.....end...
Change Line 371 in /sites/all/classic-theme/style.css
background: #fe5c11;
to whatever color you like.
At this Test Link I seek to install header and main site navigation on to the top of a blog script.
My clear:both; worked on the main site script but throws everything to the side now. Have tried numerous fixex without success! Thanks in advance for ant pointers to resolve. Clear:both; is in the footer.
/*/////////////////////MAIN SITE NAVIGATION BAR////////////////////*/
.dropnav {
width: 100%;
float: left;
margin: 0 0 1em 0;
padding: 0;
background-color: #3b3b44; /*Navigation Active Background*/
border-top: 1px solid #ccf;
}
.dropnav ol {
list-style: none;
width: 950px;
margin: 0 auto;
padding: 0;
overflow: hidden;
}
.dropnav li {
float: left; }
.dropnav li a {
display: block;
padding: 8px 25px;
text-decoration: none;
font-family: Helvetica, arial, sans-serif;
font-size: 20px;
font-weight: bold;
color: #fff; /*Active Text Color*/
border-right: 1px solid #ccf;
border-bottom: none;
}
.dropnav li:first-child a {
border-left: 2px solid #ccf; }
.dropnav li a:hover {
color: #000; /*Active Hover Color*/
background-color: #8db3ff; } /*Navigation Hover Background*/
/*////////////////STYLING TO DROPDOWN MENU//////////////////////*/
.dropnav li ol {
display: none;
width: 13em; } /*Define width of dropdown button*/
.dropnav li:hover ol {
display: block;
position: absolute;
margin: 0;
padding: 0; }
.dropnav li:hover li {
float: none; }
.dropnav li:hover li a {
background-color: #3b3b44; /*Navigation Active Background*/
border-bottom: 1px solid #ccf;
border-top: 1px solid #ccf;
border-right: 1px solid #ccf;
border-left: 1px solid #ccf;
font-size: 16px;
color: #fff; } /*Text Color*/
.dropnav li li a:hover {
color: #000;
background-color: #8db3ff; /*Navigation Hover Background*/
}
/*//////////////////END MAIN SITE NAVIGATION////////////////////*/
#container {
width: 950px;
padding-left: 0px;
padding-right: 0px;
margin: 1px auto;
background: #fafafa;
}
#header {
width: 950px;
margin-top: 15px;
}
#content {
padding-left: 5px;
padding-right: `5px;
}
#footer {
clear: both;
background: #3b3b44;
color: #ccf; /*text*/
/*margin-top: 10px;*/
margin-bottom: 10px;
padding-top: 5px;
padding-left: 15px;
padding-bottom: 5px;
border-top: 2px solid #cc0;
line-height: 1.2em;
}
you have two id's with the same name as container. you id needs to be unique and also id fieldset and i guess all your tags are not closed properly very those.
you can put a clear div after you menu to clear out this row. It is the same principle use in the 960 grid sytem.
www.960.gs
But here is a link to see the code and the result.
http://jsfiddle.net/etienne_carre/9x2P3/
Thx
I just completed an MVC tutorial, but some of my webpages don't look right. This is mine:
But it's supposed to look like this:
The code for this page is:
#model MvcSuper.Models.MusicStore.Genre
#{
ViewBag.Title = "Browse Albums";
}
<div class="genre">
<h3><em>#Model.Name</em> Albums</h3>
<ul id="album-list">
#foreach (var album in Model.Albums)
{
<li>
<a href="#Url.Action("Details",
new { id = album.AlbumId })">
<img alt="#album.Title"
src="#album.AlbumArtUrl" />
<span>#album.Title</span>
</a>
</li>
}
</ul>
</div>
The left menu (partial view):
#model IEnumerable<MvcSuper.Models.MusicStore.Genre>
<ul id="categories">
#foreach (var genre in Model)
{
<li>#Html.ActionLink(genre.Name,
"Browse", "MusicStore",
new { Genre = genre.Name }, null)
</li>
}
</ul>
Entire CSS:
{
margin: 0px;
padding: 0px;
border: none;
}
body
{
font-family: Arial, Helvetica, sans-serif;
font-size: 14px;
background-color: #FBF9EF;
padding: 0px 6%;
}
#container
{
float: left;
}
#header
{
float: left;
width: 100%;
border-bottom: 1px dotted #5D5A53;
margin-bottom: 10px;
}
#header h1
{
font-size: 18px;
float: left;
background: url(/content/Images/logo.png) no-repeat;
padding: 45px 0px 5px 0px;
}
#promotion
{
height: 300px;
width: 700px;
background: url(/content/Images/home-showcase.png) no-repeat;
}
ul li a
{
font-size: 16px;
}
#main
{
overflow: hidden;
padding: 0 0 15px 10px;
float: left;
}
ul
{
list-style-type: square;
margin-left: 25px;
font-size: 14px;
}
ul#album-list
{
list-style: none;
margin-left: 0px;
}
ul#album-list li
{
height: 130px;
width: 100px;
float: left;
margin: 10px;
text-align: center;
}
ul#album-list li a, ul#album-list li .button
{
font-size: 13px;
float: left;
}
ul#album-list li a span
{
color: #9b9993;
text-decoration: underline;
}
#cart
{
float: right;
}
#update-message
{
color: #F6855E;
font-weight: bold;
}
.button, input[type=submit]
{
clear: both;
display: inline-block;
padding: 5px;
margin-top: 10px;
border: 1px;
background: #5e5b54;
color: #fff;
font-weight: bold;
}
.button a
{
color: #fff !important;
}
#footer
{
clear: both;
padding: 10px;
text-align: right;
border-top: 1px dotted #8A8575;
border-bottom: 1px dotted #8A8575;
font-family: Constantia, Georgia, serif;
}
/******************** Top Navigation ************************/
ul#navlist
{
float: right;
}
ul#navlist li
{
display: inline;
}
ul#navlist li a
{
border-left: 1px dotted #8A8575;
padding: 10px;
margin-top: 10px;
color: #8A8575;
text-decoration: none;
float: left;
}
ul#navlist li:first-child a
{
border: none;
}
ul#navlist li a:hover
{
color: #F6855E;
}
/********************* End top navigation ***************************/
p
{
margin-bottom: 15px;
margin-top: 0px;
}
h2
{
color: #5e5b54;
}
h2, h3
{
margin-bottom: 10px;
font-size: 16px;
font-style: italic;
font-weight: bold;
}
h3
{
color: #9B9993;
}
#header h1 a, h3 em
{
color: #5E5B54;
}
a:link, a:visited
{
color: #F6855E;
text-decoration: none;
font-weight: bold;
}
a:hover
{
color: #333333;
text-decoration: none;
font-weight: bold;
}
a:active
{
color: #006633;
text-decoration: none;
font-weight: bold;
}
/***************************** sidebar navigation ****************************/
#categories
{
font-family: Constantia, Georgia, serif;
list-style-type: none;
border-right: #5d5a53 1px dotted;
padding-right: 10px;
margin: 0 25px 0 0;
float: left;
}
#categories a:link, #categories a:visited
{
color: #9B9993;
text-decoration: none;
}
#categories a:hover
{
color: #F46739;
}
div#album-details p
{
margin-bottom: 5px;
color: #5e5b54;
font-weight: bold;
}
p em
{
color: #9b9993;
}
/* Form styles */
legend
{
padding: 10px;
font-weight: bold;
}
fieldset
{
border: #9b9993 1px solid;
padding: 0 10px;
margin-bottom: 10px;
clear: left;
}
div.editor-field
{
margin-bottom: 10px;
}
input[type=text], input[type=password], select
{
border: 1px solid #8A8575;
width: 300px;
}
/* Styles for validation helpers */
.field-validation-error {
color: #ff0000;
}
.field-validation-valid {
display: none;
}
.input-validation-error {
border: 1px solid #ff0000;
background-color: #ffeeee;
}
.validation-summary-errors {
font-weight: bold;
color: #ff0000;
}
.validation-summary-valid {
display: none;
}
/* Tables */
table
{
border: 1px solid #000;
border-collapse: collapse;
color: #666666;
min-width: 500px;
width: 100%;
}
tr
{
border: 1px solid #000;
line-height: 25px;
}
th
{
background-color: #9b9993;
color: #000;
font-size: 13px;
text-align: left;
}
th, td
{
padding-left: 5px;
}
tr:hover
{
background-color: #fff;
}
I did download the source code (the author's finished version), and it turned out like mine when I ran it. The top most screenshot is from FF4 on XP, but it looks the same in IE8 on XP. Any ideas?
To push that Album listing back up to its rightful place and put your mind at ease...
add a width to your main css class:
#main
{
overflow: hidden;
padding: 0 0 15px 10px;
float: left;
width: 500px;
}
also add a * to first css class
*{
margin: 0px;
padding: 0px;
border: none;
}
Just take it easy. I'm pretty sure that this is the case of specific browser or some extra tricky css code, nothing more. Make sure you understand all the things that tutorial says and let the screen be as it is