So I have a list, but I want them to act as "blocks" so the whole thing is clickable and the background changes color. But I can not have both inline and block as display in css. How do I fix this?
The links at the top.
http://serenex.hostzi.com/
HTML
<html>
<head>
<LINK REL=StyleSheet HREF="style.css" TYPE="text/css" MEDIA=screen>
<title>Serenex - Index</title>
<head>
<body>
<div id="wrapper">
<div id="top">
<div id="logo">
<a href="http://www.http://serenex.hostzi.com/"> <img src="images/logo1.png" border="0" />
</a></div>
<div id="inbar">
<ul id="topbar">
<li>Home</li>
<li>News</li>
<li>Play</li>
<li>Vote</li>
<li>Forums</li>
</ul>
</div>
</div>
<div id="midsection">
</div>
</div>
</body>
</html>
css
body{
background:#363636;
}
#wrapper{
width:900px;
height:2000px;
margin: 0 auto;
}
#top{
width:100%
height:150px;
background:white;
border: 1px solid black;
}
#inbar{
height:30px;
width:100%;
background:#dedede;
border-top: 1px solid #b0b0b0;
}
#topbar{
position:relative;
top:-10px;
margin-left:-35px;
}
#topbar{
display: block;
}
#topbar li{
display:inline;
padding-left:20px;
padding-right:20px;
border-right: 1px solid black;
padding-bottom:5px;
padding-top:6px;
}
#topbar li a{
color:#363636;
display:block;
font: bold 14px arial, sans-serif;
display:inline;
}
Set the padding to the anchor a not the list item li. And it has to have the display: block.
This would cause it to jumb to a new line, which is why we use float: left on the list-item li and not display: inline.
#topbar li{
float: left;
border-right: 1px solid black;
}
#topbar li a{
color:#363636;
display:block;
padding: 20px 20px 5px 6px;
font: bold 14px arial, sans-serif;
}
But I can not have both inline and block as display in css
There is a way to have an element placed as an inline element and that behaves as a block element:
display: inline-block
Related
This is the beginning of the HTML code. Notice I put the div"dropdown" in the element in order to add the drop down button into my fixed navigation bar I learned how to create before learning the dropdown button. Another issue with the added button is the hover on the other list items is not flush to the bottom of the nav bar.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<link href="main.css" rel="stylesheet"/>
<title>Vasilios Lambos</title>
</head>
<body>
<header role="banner">
<div id="fixed">
<nav role="navigation">
<ul>
<li>Home</li>
<li>Portfolio</li>
<li>
<div class="dropdown">
<button class="dropbtn">Process</button>
<div class="dropdown-content">
Research
Exploration
Testing
</div>
</div>
</li>
<li>Contact
</li>
</ul>
</nav>
</div>
</header>
<div class="jumbotron">
<img src="IMG_1677.jpg" width="200" height="200"/>
<h1>Vaslios Lambos</h1>
<p>Industrial and Interaction Designer</p>
<p>Always staying hungry to learn new and inspiring ways to improve my creative process. I utilize design thinking, research methods, and ethonography to explore user experience and services. Core hard skills consist of user interface design, product rendering, and testing.</p>
</div>
<div class="pics">
<img src="VL-Logo.png" width="200" height="200"/>
</div>
<div class="info">
<div class="container">
<h3>Overview</h3>
<p> ### </p>
</div>
</div>
<div class="footer">
<h3>Soft & Hard skills</h3>
<ul>
<li>Adobe Suite</li>
<li>Axure RP</li>
<li>HTML/CSS/Javascript</li>
</ul>
</div>
</body>
</html>
Below is the CSS code for how to style the dropdown and below that you can find the #fixed class for the nav bar.
#charset "UTF-8";
#font-face {
font-family: Verdana, Geneva, sans-serif;
}
body {
font-family:Verdana, Geneva, sans-serif;
background-color: #FFF;
}
*{margin:0;padding:0;}
.dropbtn{
background-color: #999;
color:white;
padding: 20px;
font-size: 11px;
font-weight:bold;
border: none;
cursor: pointer;
text-transform:uppercase;
font-family:Verdana, Geneva, sans-serif;
z-index:-3;
}
.dropdown{
position:relative;
display: inline-block;
}
.dropdown-content{
display: none;
position: absolute;
background-color: #f9f9f9;
min-width: 160px;
box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
}
.dropdown-content a{
color:black;
padding:12px 16px;
text-decoration:none;
display:block;
}
.dropdown-content a:hover{
background-color:#3C6;
}
.dropdown:hover .dropdown-content{
display: block;
}
.dropdown:hover .dropbtn{
background-color:#3C6;
}
#fixed ul{
position:fixed;
top:0px;
width:100%;
z-index:9999;
list-style-type:none;
margin: 0;
padding: 0;
overflow:hidden;
background-color: #999;
}
nav li{
float:left;
}
nav li a{
display:inline-block;
color: white;
font-size: 11px;
font-weight: bold;
padding:20px;
text-transform:uppercase;
text-decoration:none;
}
nav a:hover {
background-color: #3C6;
}
div.jumbotron {
margin-top:53px;
margin-left:auto;
margin-right:auto;
padding:10px;
height:500px;
max-width:100%;
color:white;
text-align:center;
background-color:#000
}
.jumbotron p{
width:500px;
margin-left:inherit;
margin-right:inherit;
}
.jumbotron img {
border-radius: 50%;
margin:inherit;
}
.pics{
/*float:right;*/
display:inline;
height:232px;
width:232px;
padding:0;
margin:0;
/*z-index:-1;*/
}
.pics img{
padding:15px;
border:1px solid #ccc;
background-color: #eee;
width:200px;
height:200px;
}
div.info {
max-width:100%;
background-color: #000;
color:white;
padding:20px;
height:400px;
}
div.footer{
max-width:100%;
background-color:#000;
color:white;
height:400px;
padding:20px;
}
hi i just wanted to code a site like BBC just for practice while doing this i got an error in li item of a ul i don't know the problem but when i give it a border-right the border take more height then the original menu, i'm pasting my code here please check it and help me??
in simple words i want list item's border to be equal to the borders of "Signin" and "logo" div
<html>
<head>
<title>BBC</title>
<style>
body{
margin:0;
font-family:Arial,Helvetica,freesans,sans-serif;
}
#top{
width:100%;
height:50px;
}
.keepcenter{
width:1100px;
margin: 0 auto;
}
#logo{
border-right:1px solid #CCCCCC;
float:left;
padding-right:5px;
height:100%;
}
#signin{
font-weight:bold;
font-size:0.9em;
border-right:1px solid #CCCCCC;
width:200px;
height:100%;
float:left;
}
#signin img{
position:relative;
top:5px;
margin-left:15px;
}
#signin p{
display:inline;
position:relative;
top:1px;
padding-left:5px;
}
#menutop{
float:left;
}
#menutop ul{
list-style-type:none;
margin:0;
padding:0;
}
#menutop li{
padding:15px 20px 10px 20px;
display:inline;
font-weight:bold;
font-size:0.9em;
float:left;
border-right:1px solid #CCCCCC;
height:100%;
}
</style>
</head>
<body>
<div id="container">
<div id="top">
<div class="keepcenter">
<div id="logo">
<img src="images/logo.jpg" />
</div>
<div id="signin">
<img src="images/signicon.png" /><p>Sign In</p>
</div>
<div id="menutop">
<ul>
<li>Home</li>
<li>Home</li>
<li>Home</li>
<li>Home</li>
<li>Home</li>
</ul>
</div>
</div>
</div>
</div>
</body>
</html>
Simply remove the top and bottom padding from the list items.
body {
margin: 0;
font-family: Arial, Helvetica, freesans, sans-serif;
}
#top {
width: 100%;
height: 50px;
}
.keepcenter {
width: 1100px;
margin: 0 auto;
}
#logo {
border-right: 1px solid #CCCCCC;
float: left;
padding-right: 5px;
height: 100%;
}
#signin {
font-weight: bold;
font-size: 0.9em;
border-right: 1px solid #CCCCCC;
width: 200px;
height: 100%;
float: left;
}
#signin img {
position: relative;
top: 5px;
margin-left: 15px;
}
#signin p {
display: inline;
position: relative;
top: 1px;
padding-left: 5px;
}
#menutop {
float: left;
}
#menutop ul {
list-style-type: none;
margin: 0;
padding: 0;
}
#menutop li {
padding: 0 20px;
display: inline;
font-weight: bold;
font-size: 0.9em;
float: left;
border-right: 1px solid #CCCCCC;
height: 100%;
}
<div id="container">
<div id="top">
<div class="keepcenter">
<div id="logo">
<img src="http://lorempixel.com/40/40" alt="BBC" />
</div>
<div id="signin">
<img src="http://lorempixel.com/g/10/10" alt="" />
<p>Sign In</p>
</div>
<div id="menutop">
<ul>
<li>Home</li>
<li>Home</li>
<li>Home</li>
<li>Home</li>
<li>Home</li>
</ul>
</div>
</div>
</div>
</div>
The list is floating though, which means that its baseline is not necessarily the same as the #signin div. In my snippet, the img in the div is small enough to not have an effect, but depending on its size, the baseline of the div (and therefore the position of the p) will move down. You may have to compensate for that in the ul.
I Need to float two similar images to left and right of section container without affecting Div container. I need them to occupy the left and right side of the green boxy without affecting the position of the red box or overlapping.Please help. Heres my code:
Html:
<!Doctype html>
<html lang="eng">
<head>
<meta charset="utf-8">
<title>Envy</title>
<link rel="stylesheet" href="Envy.css">
</head>
<div id="M_wrap">
<body>
<div id="F_head">
<header id="M_head">Nhere</header>
<nav id="M_nav">
<ul>
<li class="Esec">New in stock</li>
<li>Men</li>
<li>Women</li>
<li>Children</li>
<li>Accessories</li>
</ul>
</nav>
</div>
<section id="M_section">
<img class="SE1" src="Bg2.jpg">
<img class="SE2" src="Bg2.jpg">
<div id="S_wrap">
</div>
</section>
</body>
</div>
</html>
Css:
body{
}
#M_wrap{
background-size:cover;
width:70em;
margin:.8em auto;
}
#F_head{
width:100%;
margin:.2em auto;
}
#M_head{
color:#000000;
font: Italic bold 80px/50px "Times New Roman" Arial, Tamoha;
text-align:center;
text-shadow:2px 2px #33ff00;
text-decoration:underline;
}
#M_nav{
height:3em;
width:37.5em ;
margin:2em auto;
background-color:black;
border-bottom: 1px solid #ccc;
border-top: 1px solid #ccc;
word-spacing:80px;
text-align:center;
font:Italic bold 30px/20px Times "Times New Roman", tamoha;
}
#M_nav ul li{
display:inline;
}
li.Esec{
word-spacing:0px !important;
}
#M_nav li a {
display:inline-block;
padding: 0px 15px;
font-weight:bold;
border-right: 1px solid #ccc;
}
#M_nav a:link{
color:white;
font:Italic bold 30px/40px Times "Times New Roman", tamoha;
text-decoration:none;
}
#M_nav a:hover {
color:white;
text-shadow: 2px 2px black;
text-decoration:underline;
color:#33ff00 !important;
}
#M_nav a:active{
color:red;
}
#M_nav a:visited{
color:white;
text-shadow:2px 2px black;
}
#M_section{
margin:-3.75em 0 0 0;
width:100%;
height:50em;
border-style:solid;
border-color:#33ff00;
}
#S_wrap{
margin:3em auto;
width:80%;
height:85%;
position:center;
border-style:solid;
border-color:red;
}
Something like this?
Here is part of CSS I changed:
.SE1 {
float:left;
}
.SE2 {
float:right;
}
#S_wrap{
margin:0 auto 3em auto;
/* didn't touch rest of rules you have for this ID */
}
So, for some reason, in Dreamweaver it looks fine
But on my site it is not floating them properly in any browser, I tried FireFox, Chrome, and IE8:
Link to my site if you care: http://addisonbwilson.com/Portfolio/SUBPAGES/Photography.php
HTML:
<!doctype html>
<html>
<head>
<meta charset="UTF-8">
<title>Addison Wilson: Photography</title>
<link rel="stylesheet" type="text/css" href="../CODE/pcss.css">
</head>
<body>
<?php include ("../INCLUDES/navbarsubpages.php"); ?>
<div id="imagewrapper">
<div id="imagecontainer">
<img src="../IMAGES/addyftw-picture-0001-preview-320w.jpg">
</div> <!--imagecontainer-->
<div id="imagecontainer">
<img src="../IMAGES/addyftw-picture-0002-preview-320w.jpg">
</div> <!--imagecontainer-->
<div id="imagecontainer">
<img src="../IMAGES/addyftw-picture-0003-preview-320w.jpg">
</div> <!--imagecontainer-->
</div><!--wrapper-->
<div id="imagewrapper">
<div id="imagecontainer">
<img src="../IMAGES/addyftw-picture-0004-preview-320w.jpg">
</div> <!--imagecontainer-->
<div id="imagecontainer">
<img src="../IMAGES/addyftw-picture-0005-preview-320w.jpg">
</div> <!--imagecontainer-->
<div id="imagecontainer">
<img src="../IMAGES/addyftw-picture-0006-preview-320w.jpg">
</div> <!--imagecontainer-->
</div><!--wrapper-->
<div id="imagewrapper">
<div id="imagecontainer">
<img src="../IMAGES/addyftw-picture-0007-preview-320w.jpg">
</div> <!--imagecontainer-->
<div id="imagecontainer">
<img src="../IMAGES/addyftw-picture-0008-preview-320w.jpg">
</div> <!--imagecontainer-->
<div id="imagecontainer">
</div> <!--imagecontainer-->
</div><!--wrapper-->
</body>
</html>
My CSS:
#charset "UTF-8";
/* CSS Document */
/*The body is responsiable for the background image, the rest of the site is divided between the sub wrapper and the includes */
/*bground tile is from http://subtlepatterns.com/white-brushed/ created by Andre Schouten, crediting him here as per the usage agreement */
body {margin-top: 0px; background-image:url(../Portfolio/IMAGES/brushed_#2X.png);}
/* navbar is a php include*/
#wrapper{width:980px; height:auto;}
#imagewrapper{width:auto; height:auto;}
#subwrapper{width: 980px; height: auto;}
#imagefull{width: auto; height: auto; background-color:#FFF; margin:3px 3px 3px 3px;}
#imagecontainer{width: 320px; height: 213px; background-color:#FFF; margin:3px 3px 3px 3px; float:left;}
#textcontainer{width: 320px; height: 320px; background-color:#FFF; margin:3px 3px 3px 3px; float:right;}
/* navbar and its many variations are for the navbar include*/
#navbarwrapper{positon: absolute; width:980px; height: 120px; z-index:30; background-color:#FFF;}
#navbar{width:980px; height:120px; background-repeat:repeat-x; z-index:31;}
#navbarlogo{width:210px; height:120px; float:left; z-index:32;}
#navbarcontent{width:770px; height:120px; padding-top:75px; float:left; font-family:Verdana, Geneva, sans-serif; background-repeat:repeat-x; z-index:32;}
/*Unordered lists which are used to handle drop down nav bar*/
#nav{
list-style:none;
font-family:Helvetica, Arial, sans-serif;
margin-bottom:10px;
float: right;
width:100%;
position:relative;
}
#nav li{float:left; margin-right:10px; width: 120px; position:relative;}
#nav a{display:block; padding:5px; color:#000; text-decoration:none;}
#nav a:hover{color:#fff; background:#000; text-decoration:none;}
/* drop down */
#nav ul{
background:#fff;
background:rbga(255,255,255,0);
list-style:none;
position:absolute;
left:-9999px ;}
#nav ul li{ padding-top:1px; float:none; list-style:none;}
#nav ul a{white-space:nowrap;}
#nav li:hover ul{left:0;}
#nav li:hover a{background:#ccc; text-decoration:underline;}
#nav li:hover ul a{text-decoration:none;}
#nav li:hover ul li a:hover{background:#000;}
/* general tag overides*/
h1{font-size:large}
h2{font-size:larger}
h3{font-size:medium}
img {border:none}
ul{ padding: 0; margin: 0;}
li{padding: 0;}
/*link modification*/
a:link{ text-decoration: none; color:#FFF; font-family: Helvetica, Arial, sans-serif}
a:visited{text-decoration: none;color:#FFF; font-family: Helvetica, Arial, sans-serif}
a:active{text-decoration: none;color:#FFF; font-family: Helvetica, Arial, sans-serif}
a:hover{text-decoration: none; color:#FFF; font-family: Helvetica, Arial, sans-serif}
You just need to add float: left; to the #imagecontainer styles. It's not there in the online version.
Change this:
#imagecontainer{width: 320px; height: 213px; background-color:#FFF; margin:3px 3px 3px 3px; float:left;}
to:
.imagecontainer{width: 320px; height: 213px; background-color:#FFF; margin:3px 3px 3px 3px; float:left;}
and replace every <div id="imagecontainer" with <div class="imagecontainer"
For each image float:left;
This floats each container that contain each image. Use this for what you have right now.
#imagecontainer
{
float:left;
}
You can also do the same with inline styles. But CSS is cleaner.
Also, do not use multiple elements with the same ID. Use classes. Also, is there a reason you are using containers for each image? You could have one container with many images and use
.container img
{
float:left;
}
Also, keep in mind that img {float:left;} will float ALL images on your page.
Try
#imagecontainer{
display:inline;
margin: 0px
}
#imagecontainer {
background-color: #FFFFFF;
float: left;
margin: 3px 1%;
width: 31%;
}
and this
img {
border: medium none;
height: auto;
width: 100%;
}
check it, perfect as you wanted. Responsive too ;)
As like the title, here is my case.
The header part is ok for me, i manage to center it, but the menu part, i just cant figure it.
This is the HTML Part:
<div id="container">
<div id="topcontain">
<div id="header">
<div id="logo">
Logo Here
</div>
<div id="title">
<h1> THE TITLE HERE</h1>
</div>
</div>
</div>
<div id="menu">
<div id="menu_button">
HOME
</div>
<div id="menu_button">
PRODUCTS
</div>
<div id="menu_button">
GALLERY
</div>
<div id="menu_button">
INFO
</div>
<div id="menu_button">
ABOUT US
</div>
</div>
</div>
Here is the CSS part:
#charset "utf-8";
html, body {
margin: 0px;
padding: 0px;
border: 0px;
font-family:Verdana, Geneva, sans-serif;
background-color:#000;
}
#container {
width: auto;
margin: 0 auto;
padding: 0;
}
#container #topcontain {
margin:20px 0px 20px 0px;
height:120px;
border-bottom:#F90 solid 3px;
}
#container #topcontain #header {
height:120px;
background:-moz-linear-gradient(#ffe2a3, #ffc341); /* FF3.6+ */
background:-webkit-linear-gradient(#ffe2a3, #ffc341); /* Chrome,Safari4+ */
filter:progid:DXImageTransform.Microsoft.gradient(startColorstr=#ffffe2a3,endColorstr=#ffffc341); /* IE */
}
#container #topcontain #header #logo {
width:150px;
height:117px;
margin:auto;
float:left;
}
#container #topcontain #header #title {
width:auto;
position:relative;
margin: 0px 50px 0px 0px;
height:117px;
float:right;
color: #900;
font-size:20px;
font-family:Tahoma, Geneva, sans-serif;
}
#container #menu {
float:left;
width: 100%;
padding:0 auto;
background:#ffc341;
position:relative;
overflow:hidden;
}
#container #menu #menu_button{
margin:0;
width: 150px;
position:relative;
display:block;
text-decoration:none;
text-align:center;
background:#ffc341;
float:left;
font-size:18px;
color: #000;
border-right: #F90 thin solid;
}
#container #menu #menu_button a:link, #container #menu #menu_button a:visited{
text-decoration:none;
color:inherit;
}
#container #menu #menu_button:hover{
background-color: #F30;
color:#fff;
text-decoration: overline;
}
Looking forward to your reply, thanks.
it is semantically better not to use div for menu (instead use followed by
it's wrong to repeat many times an id (instead use classes, or combine css selectors - for your html #menu-button is the same as #menu div).
Here the html + css corrected with the centered menu
<html>
<head>
<style>
#charset "utf-8";
html, body {
margin: 0px;
padding: 0px;
border: 0px;
font-family:Verdana, Geneva, sans-serif;
background-color:#000;
}
#container {
width: auto;
margin: 0 auto;
padding: 0;
}
#container #topcontain {
margin:20px 0px 20px 0px;
height:120px;
border-bottom:#F90 solid 3px;
}
#container #topcontain #header {
height:120px;
background:-moz-linear-gradient(#ffe2a3, #ffc341); /* FF3.6+ */
background:-webkit-linear-gradient(#ffe2a3, #ffc341); /* Chrome,Safari4+ */
filter:progid:DXImageTransform.Microsoft.gradient(startColorstr=#ffffe2a3,endColorstr=#ffffc341); /* IE */
}
#container #topcontain #header #logo {
width:150px;
height:117px;
margin:auto;
float:left;
}
#container #topcontain #header #title {
width:auto;
position:relative;
margin: 0px 50px 0px 0px;
height:117px;
float:right;
color: #900;
font-size:20px;
font-family:Tahoma, Geneva, sans-serif;
}
#container #menu {
width: 100%;
padding:0 auto;
background:#ffc341;
position:relative;
overflow:hidden;
}
#container #menu li{
margin:0;
width: 150px;
position:relative;
display:block;
text-decoration:none;
text-align:center;
background:#ffc341;
float:left;
font-size:18px;
color: #000;
border-right: #F90 thin solid;
}
#container #menu li a:link, #container #menu li a:visited{
text-decoration:none;
color:inherit;
}
#container #menu li:hover{
background-color: #F30;
color:#fff;
text-decoration: overline;
}
/*centered menu */
nav ul{
margin: 10px auto;
width: 755px;
}
</style>
</head>
<body
<div id="container">
<div id="topcontain">
<div id="header">
<div id="logo">
Logo Here
</div>
<div id="title">
<h1> THE TITLE HERE</h1>
</div>
</div>
</div>
<nav id="menu">
<ul>
<li>
HOME
</li>
<li>
PRODUCTS
</li>
<li>
GALLERY
</li>
<li>
INFO
</li>
<li>
ABOUT US
</li>
</ul>
</nav>
</div>
</body>
</html>
The centering is obtained giving a specific width to the ul (it could have also been a div or whatever) and giving it an "auto" margin for right and left.
well floating something will mean its taken out of the flow (somewhat) and just, as the title suggests, floating left.
try and remove it:
float:left;
So:
#container #menu {
background: none repeat scroll 0 0 #FFC341;
float: left;
overflow: hidden;
position: relative;
text-align: center;
width: 100%;
}
#container #menu #menu_button {
background: none repeat scroll 0 0 #FFC341;
border-right: thin solid #FF9900;
color: #000000;
display: inline-block;
float: left;
font-size: 18px;
margin: 0;
position: relative;
text-align: center;
text-decoration: none;
width: 150px;
}
Since the width for #menu is set as 100%, it takes up the whole width of the parent element, i.e #container, whose width is auto, i.e the width of the window.
So, you need to set the width of #menu and align it to the center, by getting rid of the float and the following changes :
#container #menu {
width: 755px; /* 151px x 5 elements */
margin:0 auto; /* Instead of padding */
position:relative;
overflow:hidden;
}
and for the yellow background, just wrap your #menu around with a #menuWrapper div, and also as Italy specified, id should be unique on a page. Use class instead.
HTML :
<div id="menuWrapper">
<div id="menu">
<div class="menu_button">
HOME
</div>
<div class="menu_button">
PRODUCTS
</div>
<div class="menu_button">
GALLERY
</div>
<div class="menu_button">
INFO
</div>
<div class="menu_button">
ABOUT US
</div>
</div>
</div>
CSS :
#menuWrapper {
background:#ffc341;
}
Also, it's better to use ul-li elements for the menu items instead of div
Full HTML + CSS : JSFiddle
You may try to modify the container menu in the css part
#container #menu
{
margin:auto;
width:85%;
padding:0 auto;
background:#ffc341;
position:relative;
overflow:hidden;
}
Try this and comment here for any issues..