I am creating my own personal website as a test for what I have learned so far in HTML and JavaScript. I made the toolbar, and it looks nice on my monitor, which has quite a large width. I have the toolbar contents to be in the center. I tried accessing it on a smaller monitor, and the elements in the toolbar overlapped each other because I set the contents based on percentages. I know that measuring with pixels will come up with the same problem. How would I create a website where if the monitor width is larger than x pixels, then it will center the contents of the toolbar, but if the monitor width is smaller than x pixels, it will not center the contents of the toolbar?
As you can see in this jsFiddle, the elements overlap, but if you drag the view pane wider, you can see that it centers.
index.html:
<body>
<div id="header">
<div id="toolbar">
<div id="links">
<ol>
<li id="home">Home</li>
<li id="blog">Blog</li>
<li id="forum">Forums</li>
<li id="chatbox">Chatbox</li>
<li id="code">Code</li>
<li id="calendar">Calendar</li>
</ol>
</div>
<div id="login">
Username: <input type="text" name="firstname"></input>
Password: <input type="text" name="lastname"></input>
<button id="submit" class="button">Submit</button>
</div>
</div>
</div>
CSS:
body{
background-color:#EBF2F0;
margin-top:50px;
}
#links{
padding:0px;
margin:0px;
top:-10px;
position:absolute;
vertical-align: center;
}
a:link{
text-decoration:none;
color:#FFFF00;
}
a:visited{
text-decoration:none;
color:#FFFF00;
}
a:hover{
text-decoration:none;
color:#000BF2;
}
a:active{
text-decoration:none;
color:#FFFF00;
}
li{
display:inline;
padding:0px;
font-family:Courier;
}
ol{
list-style-type: none;
}
#header{
width:100%;
padding:5px 10px;
margin:0px;
height:25px;
top:0px;
left:0px;
position:fixed;
background-color:#000000;
}
#toolbar{
width:70%;
margin-left:15%;
margin-right:15%;
}
#home,#blog,#forum,#chatbox,#code,#calendar{
padding:10px;
color:#000BF2;
}
#home:hover,#blog:hover,#forum:hover,#chatbox:hover,#code:hover,#calendar:hover{
background-color:#2E2E2D;
color:#000BF2;
}
#login{
color:#FFFFFF;
margin-right:30px;
text-align:right;
}
#submit{
margin-top:-7px;
margin-left:10px;
padding:6px;
}
If you need a CSS only solution you could play with min-width:
#toolbar{
width:70%;
margin-left:15%;
margin-right:15%;
min-width:1200px;
}
Fiddle
Related
My code is here (I'm a newbie just playing with some stuff I've learned; I realize this is hardly a work of art, my links all link back to Codecademy, etc - they're just placeholders) Here's the CSS:
head {background-color:#eed393;}
#links {display:inline-block;
margin-left:35px;
margin-top:8px;
margin-bottom:40px;
vertical-align:top;
}
div:hover {opacity:0.8;
}
#locationhours {
border:none;
border-radius:50px;
width:200px;
height:70px;
text-align:center; font-family:Georgia;
font-size:30px;
background-color:#724d20}
#menu {border:none;
border-radius:50px;
width:200px;
height:55px;
text-align:center; font-family:Georgia;
padding-top:15px;
font-size:30px;
background-color:#724d20}
#catering {border:none;
border-radius:50px;
width:200px;
height:55px;
text-align:center;
font-family:Georgia;
padding-top:15px;
font-size:30px;
background-color:#724d20}
a:link {text-decoration:none;
color:#b0dddf;}
a.fill_div {display: block;
height: 100%;
width: 100%
text-decoration: none;
}
And here's the HTML:
<head>
<div id:"links">
<div id="locationhours";>Location & Hours </div>
<div id="menu";>Menu</div>
<div id="catering";>Catering </div>
<div id="infocontact";>Info & <br> Contact </div>
</div>
I have a div id called #links that I am trying to use for aspects of my links I want to make universal. As you can see, although I am using inline-block, I can't get the links to be in a horizontal line; instead, they bunch up in a vertical line. If I put "div" rather than "#links" in my CSS, the inline-block works, but I'm going to have other div elements I want to use later that I don't want to apply the aspects for the links to. What am I doing wrong?
Here is a demo of your code now inline: http://jsfiddle.net/co738b5s/1/
I found lots of issues. In the "links" div you were using : instead of = to add the id. Also, when you are adding ID's and classes, you do not need the ; that you used. See my html for corrections.
<div id="links">
<div id="locationhours" class="inline">
Location & Hours </div>
<div id="menu" class="inline">
Menu
</div>
<div id="catering" class="inline">
Catering
</div>
<div id="infocontact" class="inline">
Info & <br/> Contact
</div>
</div>
//Had to make a new class for all the menu divs
head {background-color:#eed393;}
.inline {
float:left;
}
#links {
margin-left:35px;
margin-top:8px;
margin-bottom:40px;
vertical-align:top;
}
div:hover {opacity:0.8;
}
#locationhours {
border:none;
border-radius:50px;
width:200px;
height:70px;
text-align:center; font-family:Georgia;
font-size:30px;
background-color:#724d20}
#menu {border:none;
border-radius:50px;
width:200px;
height:55px;
text-align:center; font-family:Georgia;
padding-top:15px;
font-size:30px;
background-color:#724d20}
#catering {border:none;
border-radius:50px;
width:200px;
height:55px;
text-align:center;
font-family:Georgia;
padding-top:15px;
font-size:30px;
background-color:#724d20}
#infocontact {border:none;
border-radius:50px;
width:200px;
height:55px;
text-align:center;
font-family:Georgia;
padding-top:15px;
font-size:30px;
background-color:#724d20}
a:link {text-decoration:none;
color:#b0dddf;}
a.fill_div {;
height: 100%;
width: 100%
text-decoration: none;
}
The CSS display: inline must be applied to each individual member of the list you want to make inline. The display property is best described as the relationship of a node in its parent, not the relationship of all children. Furthermore, display is a non-inheritable property (see W3Schools), so applying it to the parent node #links won't affect its children (#locationhours, #menu, etc.) whatsoever.
When you changed it to affect div, you unknowingly were affecting all of the children, since they too are divs. To quickly fix this problem without any inline CSS, set each list member's div to the class .listmem, like this...
<div id="locationhours" class="listmem">
...so adding this to your CSS should quickly fix the problem:
.listmem {
display: inline;
}
I have worked very hard on this website but i have ran into an annoyance that I cannot seem to figure out! I am using Mozilla Firefox and unlike other webpages, when I zoom everything moves out of place! Usually that only happens when you resize but for some reason it is doing it for zoom also!! How can I fix this? Here is the code bellow:) Thanks! P.S. My zoom is at 90%, if there is a way to automatically set the zoom of browser when the user opens the page, please let me know!
*{margin:0; padding:0;}
.container{
width:100%;
height:100%;
background-image:url(backgrounds/background4.jpg);
background-size: cover;
overflow:hidden;
}
body{
width:100%;
}
.mainHeader{
width:100%;
height:100px;
background-color:rgba(0,0,0,0.6);
/*background-color:#182418;*/
/*opacity:0.7;*/
}
.mainHeader nav ul{
margin-right:70px;
float:right;
}
.mainHeader nav ul li{
display:inline-block;
margin-top:30px;
margin-right:20px;
}
.mainHeader nav ul li a{
text-decoration:none;
font-family:Arial;
font-size:25px;
color:#ACACAC;
margin-right:30px;
}
.mainHeader nav ul li a.active{
color:white;
}
.mainHeader nav ul li a:hover{
color:white;
}
.mainHeader img{
margin-top:-25px;
}
.mainArea .panel{
margin-left:25%;
margin-top:2%;
width:50%;
height:620px;
background-color:rgba(0,0,0,0.6);
}
.mainArea .panel h1{
color:white;
font-family:Arial;
padding:50px;
padding-left:60px;
text-align:center;
}
.mainArea .panel p{
color:white;
font-family:Arial;
padding:30px 50px 50px 50px;
text-align:center;
font-size:25px;
}
.mainArea .panel form{
margin-right:33%;
position:relative;
top:-5%;
float:right;
}
.mainArea .panel form .name, .email{
width:300px;
height:40px;
border-radius:10px;
margin-bottom:40px;
background:rgba(0, 0, 0, 0.55);
border:none;
padding-left:20px;
font-family:Arial;
font-size:20px;
color:gray;
}
.mainArea .panel form .body{
resize:none;
width:300px;
height:200px;
border-radius:10px;
margin-bottom:40px;
background:rgba(0, 0, 0, 0.55);
border:none;
padding-left:20px;
font-family:Arial;
font-size:20px;
color:gray;
padding-top:20px;
padding-right:30px;
}
.mainArea .panel form .submit{
width:90px;
height:43px;
background:rgba(0, 0, 0, 0.55);
border:none;
font-family:Arial;
font-size:20px;
color:gray;
padding-top:-3px;
border-radius:10px;
margin-top:-5px;
margin-left:100px;
}
.mainArea .panel form .submit:hover{
cursor:pointer;
}
<html>
<head>
<meta charset="UTF-8">
<title>About</title>
<meta name="viewport" content="width=device-width, initial scale=1">
<link rel="stylesheet" href="contact.css">
<script type="text/javascript" src="jquery/jquery.js"></script>
<script type="text/javascript" src="jquery/jqueryui.js"></script>
<script type="text/javascript" src="config.js"></script>
<script type="text/javascript" src="scripts/script.js"></script>
</head>
<body>
<div class="container">
<div class="mainHeader">
<nav>
<ul>
<li>Home</li>
<li>About</li>
<li><a class="active" href="#">Contact</a></li>
</ul>
</nav>
<img class="logo" src="logo.png">
</div>
<div class="mainArea">
<div class="panel">
<h1>Welcome to our contact page!</h1>
<form action="php/mail.php" method="POST">
<input type="text" value="Name" name="name" class="name"><br/>
<input type="text" value="Email" name="email" class="email"><br/>
<textarea name="message" class="body" rows="4" cols="50">What would you like to ask?</textarea><br/>
<input type="submit" value="Send!" class="submit">
</form>
</div>
</div>
</div>
</body>
</html>
And here is the background named background4.jpg Also, if you try to run the code snipet on this site it will get messed up because of the way stack overflow is laid out and because it needs the background image. So copying to a text file would work best.
if your elements get dispersed while zooming or re-sizing your browser window
use min-width and min-height for the containers
that will make them stay in the right way you like them
try to add this line :
.mainArea .panel {
min-width: 790px;
}
Unfortunately there isn't an universal way for browsers to zoom everything. At least not without a whole lot of scripting.
In my opinion it's also pretty weird to design a website and force browsers to 90%.
Zooming isn't what people do a lot (on desktop). Why not design a page at 100%?
I'm building a test page with a menu bar, but the deviders (basically divs with a width of 1) position themselves differently in Chrome and Mozilla. I'm building it in Chrome, and find it weird that it is doing the positioning thing differently. Does anyone know what might be causing this? My code is as follows:
HTML
<head>
<link rel="stylesheet" type="text/css" href="global.css">
<link href='http://fonts.googleapis.com/css?family=Open+Sans:300italic,300' rel='stylesheet' type='text/css'>
</head>
<!-------------------------------------------MENUDEV1------------------------------------------->
<div id="menuContainer">
<!-----------------------------------DEVIDER----------------------------------->
<div id="menuLogo">
<a href="/home.html">
<img id="menuLogo2" src="http://www.placehold.it/126x50/ff0000/000000&text=Logo+gaat+hier">
</a>
</div>
<div id="menuDevide1"></div>
<!-----------------------------------DEVIDER----------------------------------->
<div id="menuPortfolio1">
<a id="menuPortfolio2" class="menuClick" href="portfolio.html">portfolio</a>
</div>
<div id="menuDevide2"></div>
<!-----------------------------------DEVIDER----------------------------------->
<div id="menuServices1">
<a id="menuServices2" class="menuClick" href="services.html">services</a>
</div>
<div id="menuDevide3"></div>
<!-----------------------------------DEVIDER----------------------------------->
<div id="menuProcess1">
<a id="menuProcess2" class="menuClick" href="process.html">our process</a>
</div>
<div id="menuDevide4"></div>
<!-----------------------------------DEVIDER----------------------------------->
<div id="menuContact1">
<a id="menuContact2" class="menuClick" href="contact.html">contact</a>
</div>
<!-----------------------------------DEVIDER----------------------------------->
</div>
<div id="menuBottomline"></div>
<!-----------Everything from MENUDEV1 up to this point should be considered as a whole.----------->
CSS
#menuContainer{
width:650px;
height:50px;
margin-top:0;
margin-right:auto;
margin-bottom:0;
margin-left:auto;
background-color:rgba(100, 100, 100, 0.46);
}
#menuLogo2{
height:50px;
width:126px;
}
/*ALL "menuDevide" IDS ARE TO BE NUDGED TO THE LEFT 2 TO 3 PIXELS AFTER THE MENU ITEMS HAVE BEEN PLACED!*/
#menuDevide1{
width:1px;
height:45px;
background-color:black;
position:relative;
top:-47.5px;
left:131px;
margin-top:auto;
margin-right:0;
margin-bottom:auto;
margin-left:0;
}
#menuDevide2{
width:1px;
height:45px;
background-color:black;
position:relative;
top:-119.5px;
left:259px;
margin-top:auto;
margin-right:0;
margin-bottom:auto;
margin-left:0;
}
#menuDevide3{
width:1px;
height:45px;
background-color:black;
position:relative;
top:-191.5px;
left:386px;
margin-top:auto;
margin-right:0;
margin-bottom:auto;
margin-left:0;
}
#menuDevide4{
width:1px;
height:45px;
background-color:black;
position:relative;
top:-263.5px;
left:515px;
margin-top:auto;
margin-right:0;
margin-bottom:auto;
margin-left:0;
}
#menuBottomline{
width:100%;
height:1px;
background-color:black;
position:absolute;
top:70px;
left:0px
}
.menuClick{
color:#000000;
text-decoration:none;
font-family: "Open Sans", Arial, sans-serif;
font-size:20px;;
}
.menuClick:hover{
color:#999999;
}
#menuPortfolio1{
position:initial;
top:-83px;
left:13px;
width:126;
}
#menuServices1{
position:initial;
top:-83px;
left:131px;
width:126;
}
#menuProcess1{
position:initial;
top:-83px;
left:131px;
width:126;
}
#menuContact1{
position:initial;
top:-83px;
left:131px;
width:126;
}
#menuPortfolio2{
}
#menuServices2{
}
#menuProcess2{
}
#menuContact2{
}
Alternatively, you could check out this JSfiddle
Every browser has its own default settings for font size, margins and/or padding around certain elements, etc. Webdesigners should aim to have their sites display well on all kinds of browsers, but these different default settings can easily lead to problems.
http://meyerweb.com/eric/tools/css/reset/ is a tool to reset all default css properties to zero in each browser. I tried to add it in your JSfiddle and the style was applying in the same way in FF and Chrome. OFC, now you have to rework it until the wanted result.
hi i am working on a site layout , because of my problem and for some other reasons like that it doesn't matter to me if i just can use the layout on my own as well cause i made it.
but the problem is that the pulldown menu isn't working as it is mend to be.
i share with you the code:
<html>
<head>
<style>
body{
background:linear-gradient(to bottom right,#013,#c0c);
color:#930;
}
#nav{
margin-left:auto;
margin-right:auto;
margin-top:40px;
maring-bottom:10px;
color:#930;
background-color:#cb6;
border:2px solid #930;
border-radius:13px;
-webkit-border-radius:13px;
-moz-border-radius:13px;
text-align:center;
float:center;
width:750px;
height:40px;
}
#main{
margin-left:auto;
margin-right:auto;
margin-top:auto;
maring-bottom:auto;
color:#930;
background-color:#cb6;
border:2px solid #930;
border-radius:13px;
-webkit-border-radius:13px;
-moz-border-radius:13px;
text-align:center;
float:center;
width:750px;
height:500px;
}
#nav ul{
list-style:none;
margin:0 auto;
}
#nav li{
position:relative;
float:left;
display:inline;
}
#nav a{
text-decoration:none;
color:#930;
padding:10px 25px;
height:20px;
display:inline-block;
}
#nav a:hover{
text-decoration:none;
color:#fff;
background-color:#930;
padding:10px 25px;
height:20px;
display:inline-block;
}
#pull li ul{
display:none;
color:#930;
text-align:center;
position:absolute;
}
#pull li:hover ul{
display:block;
color:#930;
text-align:center;
position:absolute;
}
#pull li ul a{
display:block;
min-width:80px;
width:auto;
height:25px;
color:#fff;
padding:0px 5px;
text-align:center;
border:2px solid #930;
background-color:#cb6;
}
#pull li ul a:hover{
display:block;
min-width:80px;
width:auto;
height:25px;
color:#fff;
padding:0px 5px;
text-align:center;
border:2px solid #fff;
background-color:#930;
}
</style>
</head>
<body>
<div id="nav">
<ul id="pull">
<li><b>home</b></li>  
<li><b>page 1 ▼</b>
<ul>
<li><b>page 2</b><li>
<li><b>page 3</b><li>
</ul>
</li>
</ul>
</div>
<br><br>
<div id="main">
de content komt nog
</div>
</body>
</html>
also the online lay-out is see-able for eyes at www.elderpact.tk
the menu bar and everything need to stay like they are
but the drop down menu has to lower the content box if it is opened.
now it goes right trough the content.
also i would like to display the drop down menu direct under the drop down menu opener
(page 1).
could someone please help me?
the risk with create you own dropdown is not work in all browsers. The best solution for this problem is use Bootstrap Twitter. Bootstrap DropDown
Here's a fiddle with the menu the way I think you want it: http://jsfiddle.net/TPLJ8/1/
You basically need to remove the margin and padding from the ul and li elements at the top of your CSS (resets), like this:
ul, li {margin:0; padding:0;}
This will help you start with a clean slate. I also cleaned up your CSS as you don't need to declare the same styling on hovers if that style stays the same.
Your HTML also needed some work. You were missing closing </li> tags and had a bunch of unnecessary <br /> tags.
My code has been validated by w3school yet it still displays differently in IE and firefox.
My link bar allong the top seems to cascade down in IE but displays in a stright line (as it should be ) in Firefox!!!
My HTML
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<link rel="stylesheet" type="text/css" href="lbf.css">
<title>Love British Film</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
</head>
<body>
<div id="main_container">fegerfg
<div id="header">
<div class="logo">Love British Film.com </div>
</div>
<div class="nav_bar">
<ul class="nav_list">
<li class="odd">Home</li>
<li class="even">Reviews</li>
<li class="odd">Forums</li>
<li class="even">Videos</li>
<li class="odd"><a href="index.html" >Downloads</a></li>
<li class="even">News</li>
<li class="odd"><a href="index.html" >Fun bits</a></li>
<li class="even">Contact us</li>
</ul>
</div>
<div class="main_text">
<div class="header">HEADER FOR MAIN CONTENT</div>
Main content!!
</div>
<div id="film_of_day">Film of day </div>
<div id="poll_of_week">asdnasdljasasdasfdasfasfas</div>
</div>
</body>
</html>
And My CSS code
body
{
background:url(bg.jpg) no-repeat #FFF center top;
padding:0;
font-family:Arial, Helvetica, sans-serif;
font-size:11px;
margin:0px auto auto auto;
}
div {
margin: 0px;
padding: 0px;
width: 0px;
}
#main_container{
width:1200px;
height:auto;
margin:auto;
padding:0px;
}
#header{
position:relative;
width:1200px;
height:170px;
background:url(header.jpg) no-repeat center;
background-position:0px 0px;
margin:auto;
padding:5px;
}
.logo{
width:auto;
height:auto;
font-size:20px;
position:relative;
top:80%;
text-align:right;
}
.nav_bar{
width:1200px;
height:50px;
}
ul.nav_list{
list-style-type:none; float:left; display:block; width:1200px;
margin:0px; padding:0px;
}
ul.nav_list li.odd a{
display:block;width:150px; text-align:center; float:left;text-decoration:none; background:url(images/home.png) no-repeat left;
background-color:rgb(147,216,255);height:40px; line-height:40px; color:rgb(168,100,63);
}
ul.nav_list li.even a{
display:block;width:150px; text-align:center; float:left;text-decoration:none; background:url(images/home.png) no-repeat left; color:rgb(168,100,63);
height:40px; line-height:40px;background-color:rgb(26,142,165);
}
a.odd:link, a.odd:visited {
display:block;width:133px; text-align:center; float:left;text-decoration:none; background:url(images/home.png) no-repeat left; }
ul.nav_list li.even a:hover{background-color:#A29;}
ul.nav_list li.odd a:hover{background-color:#F99;}
a.even:link, a.even:visited {
display:block;width:133px; text-align:center; float:left;height:40px;text-decoration:none; background:url(images/home.png) no-repeat left; color:#676d77;}
a.even:hover{
color:#FFFFFF;
}
.header{
width:500px;
text-align:center;
margin-bottom:50px;
}
.main_text{
display:inline-block;
float:left;
width:600px;
height:600px;
background-color:rgb(147,216,255);
}
#film_of_day{
float:right;
width:340px;
height:250px;
background-color:rgb(147,216,255);
}
#poll_of_week{
margin-top:50px;
float:right;
width:280px;
height:250px;
outline:solid;
padding:1px;
}
Welcome to the real world.
IE and Firefoy interpret CSS different from each other. This was always a problem, and it will always be ! If you want to reduce different behaviours or looks, you could try to use a so called CSS reset.
What is a css reset ?
This is a simple css file, which resets every positioning, padding,margin, everything that comes by default from the browser to zero. So you can ensure that most of your styling will be interpreted the same. Sure still it will not alway be the same, but it helps you to put it in the right direction. You could also use GridLayouts for positioning, which is also a great tool and works and looks the same in the most browsers.
http://meyerweb.com/eric/tools/css/reset/
http://960.gs/
And just a hint, open it with opera,chrome, elder verions of IE, safari and you will be astonished that it also looks different ;-)
You are floating your a tag inside your li tag which isn't good practice and causing your problems.
You should float your li tag and leave your a tag un-floated inside as the link
See: http://jsfiddle.net/ZmhzA/1/