I built a menu but for some reason the left side of the menu drops when the browser is re-sized and when this happens the bottom border disappears. Is there any way to stop this from happening and just have the whole menu scale until it reaches a certain size?
heres my CSS:
#charset "utf-8";
/* Main CSS Document */
#parent{
padding: 0px, auto;
width: 50%;
min-width:50%;
height: 50px;
margin-top:3%;
margin-left: 25%;
margin-right: 15%;
background: #FFF;
border-bottom:thin groove #000;
}
#child-left{
float: left;
padding-left:25px;
width: 35%;
min-width:35%;
height: 50px;
background: #FFF;
}
#child-right{
padding-top: 15px;
padding-right:20px;
float: right;
width: 60%;
min-width:60%;
height: 35px;
background: #FFF;
}
#logoparent{
padding: 0px, auto;
width: 100%;
height: 50px;
margin-left: 15%;
margin-right: 15%;
background: #FFF;
}
#menu{
float:right;
padding-right:7%;
font-family:"Courier New", Courier, monospace;
font-size:18px;
font-weight:600;
color:#666666;
}
#menuend {
padding-right:10px;
float:right;
font-family:"Courier New", Courier, monospace;
font-size:18px;
font-weight:600;
color:#666666;
}
#menu:hover{
color:#C30;
}
And here is the HTML:
<!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 rel="stylesheet" type="text/css" href="mainstylesheet.css" />
<title>Home</title>
</head>
<body>
<div id="parent">
<div id="child-left"><img name="Logo" src="" width="100%" height="100%" alt="" /></div>
<div id="child-right">
<div id="menupad">
<div id="menuend"> Contact </div>
<div id="menu"> Gallery </div>
<div id="menu"> About </div>
<div id="menu"> Home </div>
</div>
</div>
</div>
</body>
</html>
Any help is greatly appreciated!
Ok so I saw your design and couldn't decipher all the % you are using in your css (my bad) so i started from scratch and tried to match your design. I hope you can adjust it to your linking. Here it is:
See jsFiddle
HTML
<!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 rel="stylesheet" type="text/css" href="mainstylesheet.css" />
<title>Home</title>
</head>
<body>
<div id="parent">
<div id="child-left">
<img name="Logo" src="" width="200px" height="50px" alt="" />
</div>
<div id="child-right">
<div id="menupad">
<div id="menuend"> Contact </div>
<div id="menu"> Gallery </div>
<div id="menu"> About </div>
<div id="menu"> Home </div>
</div>
</div>
<div class="clear"></div>
</div>
</body>
</html>
CSS
#charset "utf-8";
/* Main CSS Document */
#parent{
max-width: 900px;
margin: 0 auto;
border-bottom:thin groove #000;
}
#child-left{
float: left;
height: 50px;
}
#child-right{
float: right;
height: 50px;
line-height: 80px;
vertical-align: bottom;
}
#logoparent{
height: 50px;
}
#menu{
float:right;
font-family:"Courier New", Courier, monospace;
margin-left: 10px;
}
#menuend {
float:right;
font-family:"Courier New", Courier, monospace;
margin-left: 10px;
}
.clear{
clear: both;
}
Related
I'm making a simple web page for practice and attempting to incorporate an image gallery, but I think I messed up my divs somehow because when I add content to the main part like image thumbnails they cause a weird gap between the header and left navbar. It's probably some simple solution but I'm super beginner so it's escaping me. Any help at all is appreciated, thanks in advance!
Here is my HTML code:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width,initial-scale=1,maximum-scale=1,user-scalable=no">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<meta name="HandheldFriendly" content="true">
<title>Lab 8</title>
<link rel="stylesheet" href="styles.css">
</head>
<body>
<img class= "image" alt="flower" src="flower.jpg"style="max-width:100%;height:auto;">
<h1 class="header">Photos By Doug</h1>
<div id ="wrapper">
<main> Here is some content info about Doug Kowalski Photography
<img src="desert.jpg" class="thumbnail" height="100" width="100" />
<img src="hills.jpg" class="thumbnail" height="100" width="100"/>
</div>
<div class="nav">
Home<br>
Journals<br>
Books<br>
Nature<br>
Contact<br>
</div>
<img class ="image2" alt="vine" src="vine.jpg"style="max-width:100%;height:auto;">
</main>
</body>
</html>
And CSS:
body {
background-color: #88abc2;
margin:0;
}
.image{
height: 250px;
border-radius:5px;
background-repeat: no-repeat;
padding-bottom:10px;
float:left;
width: 25%
}
.header{
display:flex;
padding-top: 100px;
color: white;
text-align: center;
font-size: 50px;
font-family: papyrus;
background-color:#49708A;
justify-content: center;
align-items:center;
}
#wrapper {
height:100%;
margin: 10px;
padding: 0px;
width:67%;
}
.nav {
height: 100%;
width: 20%;
padding-top: 40px;
background-color:#49708A;
}
.nav a{
padding-left:3px;
padding: 6px 6px 6px 32px;
font-weight: bold;
color: #EBF7F8;
text-decoration: none;
font-size: 25px;
display: block;
}
ul {
list-style-type: none;
margin: 0;
overflow: hidden;
}
.nav a:hover {
color: #CAFF42;
}
main{
padding-top: 38px;
text-align:left;
padding-left: 30%;
}
.image2{
height:10%;
width:15%;
position: absolute;
right: 0px;
bottom: 0px;
right:0px;
bottom: 0px;
}
.thumbnail:hover {
position:relative;
top:-25px;
left:-35px;
width:500px;
height:auto;
display:block;
z-index:999;
}
Edit: and a photo of the area in question:
Do you mean like this?
I saw this:
<div id=wrapper>
<main>
</div>
</main>
Edit: Mistyped styles.css
I've created a basic HTML page layout with 3 divs. The third div (sidebar) meant float to top right but it floats on the right but under the 1st div.
Does anyone know where I am going wrong?
So the green div (sidebar) should float to top right when the window is maximised, and if the window is resized, it should float on the right under the div 1 and alongside div 2
<!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 content="text/html; charset=utf-8" http-equiv="Content-Type" />
<title>Untitled 1</title>
<link rel="stylesheet" href="styles1.css" type="text/css" />
<style type="text/css">
.page {
width:90%;
}
.div1 {
width: 750px;
background-color: gray;
float:left;
}
.div2 {
width: 60%;
background-color: blue;
float:left;
}
.sidebar {
width: 30%;
background-color: green;
float: right;
}
</style>
</head>
<body>
<div class="page">
<div class="div1">
<p>div1</p>
</div>
<div class="div2">
<p>div2</p>
</div>
<div class="sidebar">
<p>sidebar</p>
</div>
</div>
</body>
</html>
consider this code snippet, I switched the '.div2 'and '.sidebar' positions
.page {
width:90%;
}
.div1 {
width: 750px;
background-color: gray;
float:left;
}
.div2 {
width: 60%;
background-color: blue;
float:left;
}
.sidebar {
width: 30%;
background-color: green;
float: right;
}
<div class="page">
<div class="div1">
<p>div1</p>
</div>
<div class="sidebar">
<p>sidebar</p>
</div>
<div class="div2">
<p>div2</p>
</div>
</div>
You can use CSS Grid Layout system. https://www.w3schools.com/css/css_grid.asp
<!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 content="text/html; charset=utf-8" http-equiv="Content-Type" />
<title>Untitled 1</title>
<link rel="stylesheet" href="styles1.css" type="text/css" />
<style type="text/css">
.page {
width:90%;
float:left;
display: grid;
grid-template-areas:
'header header sidebar'
'main main sidebar';
}
.div1 {
grid-area: header;
width: 100%;
background-color: gray;
float:left;
padding:7px;
color:#fff;
}
.div2 {
grid-area: main;
width: 100%;
background-color: blue;
float:left;
padding:7px;
color:#fff;
}
.sidebar {
grid-area: sidebar;
width: 100%;
background-color: green;
float: left;
padding:7px;
color:#fff;
}
</style>
</head>
<body>
<div class="page">
<div class="div1">
<p>div1</p>
</div>
<div class="div2">
<p>div2</p>
</div>
<div class="sidebar">
<p>sidebar</p>
</div>
</div>
</body>
</html>
I'm working on header section where there are 3 spans, one floating to the left, one floating to the right and the other span in the middle. The middle span is not getting horizontally aligned no matter what.
body{
font-family: Myriad Set Pro;
margin: 0;
}
/* ===================== Header Section =============================*/
#header{
width: 100%;
position: fixed;
height: 75px;
line-height: 75px;
box-shadow: 5px 5px 5px #edeff2;
text-align: center;
}
#position{
float: right;
margin-right: 10px;
/*width: 20px;*/
/*margin-top: -75px;*/
}
#logo{
float: left;
height: inherit;
}
#logo:hover{
cursor: pointer;
}
#name{
border: 1px solid black;
position: absolute;
margin: 0px auto;
}
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Dash Html</title>
<link rel="stylesheet" type="text/css" href="dash.css">
</head>
<body>
<div id="header">
<a href="https://www.google.com" target="_blank">
<img src="abc.png" id="logo">
</a>
<span id="position"> Developer Developer </span>
<span id="name">SKSV</span>
</div>
</body>
</html>
Here is a simpler solution. Wrap them in a parent div and make the width equal. Take a look at the following:
body{
font-family: Myriad Set Pro;
margin: 0;
}
/* ===================== Header Section =============================*/
#header{
width: 100%;
position: fixed;
height: 75px;
line-height: 75px;
box-shadow: 5px 5px 5px #edeff2;
text-align: center;
font-size:0;
}
.header-col
{
display:inline-block;
width:33.3333333334%;
vertical-align:middle;
font-size:13px;
}
#position{
display:block;
text-align:right;
}
#logo{
display:block;
text-align:left;
}
#name{
border: 1px solid black;
display:block;
text-align:center;
}
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Dash Html</title>
<link rel="stylesheet" type="text/css" href="dash.css">
</head>
<body>
<div id="header">
<div class="header-col">
<a href="https://www.google.com" target="_blank" id="logo">
<img src="abc.png">
</a>
</div>
<div class="header-col">
<span id="name">SKSV</span>
</div>
<div class="header-col">
<span id="position"> Developer Developer </span>
</div>
</div>
</body>
</html>
I would use left: 50%. Here. I this what you wanted:
body{
font-family: Myriad Set Pro;
margin: 0;
}
/* ===================== Header Section =============================*/
#header{
width: 100%;
position: fixed;
height: 75px;
line-height: 75px;
box-shadow: 5px 5px 5px #edeff2;
text-align: center;
}
#position{
float: right;
margin-right: 10px;
/*width: 20px;*/
/*margin-top: -75px;*/
}
#logo{
float: left;
height: inherit;
}
#logo:hover{
cursor: pointer;
}
#name{
border: 1px solid black;
position: absolute;
margin: 0px auto;
left: 50%;
}
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Dash Html</title>
<link rel="stylesheet" type="text/css" href="dash.css">
</head>
<body>
<div id="header">
<a href="https://www.google.com" target="_blank">
<img src="abc.png" id="logo">
</a>
<span id="position"> Developer Developer </span>
<span id="name">SKSV</span>
</div>
</body>
</html>
Am working on making a copy of the BBC site and want to make two horizontal bars (part of the header) butt up against each other. Right now, there is a space between the two which I want to remove.
Here is the image I am getting:
Here is the HTML and CSS:
<!doctype html>
<html>
<head>
<title>BBC_Copy</title>
<meta charset="utf-8" />
<meta http-equiv="Content-type" content="text/html; charset=utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<style type="text/css">
body {
margin:0;
font-family: arial, helvetica, sans-serif;
}
#topbar {
background-color:#7A0000;
width: 100%;
height:40px;
color:white;
}
.fixedwidth {
width:1050px;
margin:0 auto;
}
#logodiv {
padding-top:5px;
float:left;
border-right:1px solid #770000;
padding-right: 10px;
}
#signindiv {
font-weight: bold;
padding:2px 80px 12px 20px;
font-size: 0.9em;
float:left;
border-right:1px solid #770000;
}
#signindiv img {
position:relative;
top:3px;
}
#topmenudiv {
float:left;
}
#topmenudiv ul {
margin:0;
padding:0;
}
#topmenudiv li {
list-style: none;
font-wieght:bold;
font-size:0.9em;
border-right:1px solid #770000;
height:100%;
padding:10px 20px 12px 20px;
float:left;
}
#searchdiv {
float:left;
padding:5px 0 0 10px;
}
#searchdiv input {
height:25px;
border:none;
font-size:0.9em;
padding-left: 10px;
background-image: url("images/magnify.png");
background-repeat: no-repeat;
background-position:center right;
}
.break {
clear:both;
}
#newsbar {
background-color:#7A0000;
width: 100%;
height:40px;
color:white;
}
</style>
</head>
<body>
<div id="container">
<div id="topbar">
<div class="fixedwidth">
<div id="logodiv">
<img src="images/bbc_logo.png" />
</div>
<div id="signindiv">
<p><img src="images/signin.png" />Sign In</p>
</div>
<div id="topmenudiv">
<ul>
<li>News</li>
<li>Sport</li>
<li>Weather</li>
<li>iPlayer</li>
<li>TV</li>
<li>Radio</li>
<li>More...</li>
</ul>
</div>
<div id="searchdiv">
<input type="text" placeholder="Search" />
</div>
</div>
<div class="break">
</div>
<div id="newsbar">
</div>
</div>
</body>
</html>
Your problem is in:
<div id="signindiv">
<p><img src="images/signin.png" />Sign In</p>
</div>
The <p> tags are adding extra margin on top and bottom. I would recommend getting rid of the p tags... they don't add any semantic advantage.
Replace this:
<div id="signindiv">
<p><img src="images/signin.png" />Sign In</p>
</div>
with this:
<div id="signindiv">
<img src="images/signin.png" />Sign In
</div>
Result: http://jsfiddle.net/ru7zzc1w/1/
I am struggling with this issue for 3 hours now i don't know what i am doing wrong. i have an nba logo at the bottom right but i am trying to align it above the div just like the social icons on the right. i tied many things with css and no luck.
Here is also the relevant code.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head>
<title>Basketball</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="themes/jquery.mobile.icons.min.css" />
<link rel="stylesheet" href="http://code.jquery.com/mobile/1.4.0/jquery.mobile.structure-1.4.0.min.css" />
<link rel="stylesheet" type="text/css" href="cssfinal/style.css" />
<link rel="stylesheet" type="text/css" href="cssfinal/loginstyle.css" />
<script src="http://code.jquery.com/jquery-1.10.2.min.js"></script>
<script src="http://code.jquery.com/mobile/1.4.0/jquery.mobile-1.4.0.min.js"></script>
<script src="http://code.jquery.com/ui/1.10.3/jquery-ui.min.js"></script>
</head>
<body>
<!-- PAGE 1 -->
<div data-role="page" data-theme="a" id="page1">
<div data-role="content" data-theme="a">
<div class="login-box" id="login">
<div id="loginprompt">
<div id="header">
<h3>BASKETBALL FANATICO</h3>
<h5>SHADOW RTD</h5>
</div>
</div>
<form method="GET">
<div id="username" data-role="fieldcontain">
<input type="text" name="username" placeholder="Username" />
</div>
<div id="password" data-role="fieldcontain">
<input type="password" name="password" id="txtId" placeholder="Password"/>
</div>
<div id ="loginbtn">
<a data-role="button" id="log" data-theme="a" href="#page2" data-transition="slide">LOGIN</a>
</div>
</form>
<br />
<div id="icons">
<div>
<img src="socialicons/home.png" class="left" ></img>
<img src="socialicons/facebook.png" class="left" ></img>
<img src="socialicons/twitter.png" class="left" ></img>
<img src="socialicons/googleplus.png" class="left" ></img>
<img src="socialicons/linkedin.png" class="left" ></img>
</div>
<div><img src="rsicloud.png" class="right" ></img></div>
</div>
</div>
</div>
</div>
</body>
</html>
This is the relevant Css.
.login-box {
margin: auto;
padding: 10px 30px 25px 25px;
background: none repeat scroll 0% 0% rgb(241, 241, 241);
border: 1px solid rgb(229, 229, 229);
width:300px;
}
.ui-field-contain {
border-bottom-width: 0px;
}
#loginbtn {
text-align: center;
width: 150px;
margin: auto;
}
#loginprompt{
text-align: right;
}
#loginprompt h4{
text-align: left;
font-size: 14px;
}
#header{
text-align: center;
}
#header h5{
color: #373E4A;
font-size: 11px;
font-family: Courier;
}
#header h3{
font-family: sans-serif;
}
#login{
width: 85%;
margin:auto;
}
#icons{
text-align: right;
}
.left{
margin: 2px;
float:left;
}
.right{
float:right;
}
a#log.ui-link.ui-btn.ui-btn-a.ui-shadow.ui-corner-all {
background-color: #4289C1;
color: white;
font-size: 16px;
font-family: sans-serif;
}
Can someone please advice me? i am not experienced web developer so it might even be a silly mistake so sorry if it is.
Just modified the Code. due to lack of image I can't see actually its working or not.
Check the Demo. http://jsbin.com/yoqepoqa/1/