I'm having trouble with putting my navigation bar on the left side of my simple webpage. It must be below the header section. This is the Whole HTML Code.
<html>
<head>
<title>My Homepage</title>
</head>
<style>
#header{
width:800px;
height:200px;
background-color:yellow;
}
#footer{
width:800px;
height:100px;
background-color:red;
clear:both;
}
#nav{
width:200px;
height:400px;
background-color:pink;
float:left;
}
#con{
width:800px;
height:400px;
background-color:gray;
}
</style>
<body>
<div id=external>
<div id=header><b>SAMPLE HEADER<b> <img src="kappa.gif"alt="kappa"height="50"width="50"></div>
<div id=con><iframe name=container width=100% height=100% src=default.html></iframe></div>
<div id=footer><b>PUP COPYRIGHT 2016<b> <img src="pup.jpg"alt="pup"height="50"width="50"></div>
<div id=nav>
<ul>
<li><a href=AboutUs.html target=container>About Us</a></li>
<li><a href=ContactUs.html target=container>Contact Us</a></li>
</ul>
</div>
I'm having trouble with putting my navigation bar on the left side of my simple webpage. It must be below the header section.
Your CSS will actually work perfectly if you move your nav markup up to be directly below your closing header div:
<div id=external>
<div id=header><b>SAMPLE HEADER<b> <img src="kappa.gif"alt="kappa"height="50"width="50"></div>
<div id=nav>
<ul>
<li><a href=AboutUs.html target=container>About Us</a></li>
<li><a href=ContactUs.html target=container>Contact Us</a></li>
</ul>
</div>
<div id=con><iframe name=container width=100% height=100% src=default.html></iframe></div>
<div id=footer><b>PUP COPYRIGHT 2016<b> <img src="pup.jpg"alt="pup"height="50"width="50"></div>
Please refer the code to make it
#nav {
width: 100%;
height: auto;
background-color: pink;
float: left;
}
<div id=external>
<div id=header><b>SAMPLE HEADER<b> <img src="kappa.gif"alt="kappa"height="50"width="50">
<div id=nav>
<ul>
<li><a href=AboutUs.html target=container>About Us</a></li>
<li><a href=ContactUs.html target=container>Contact Us</a></li>
</ul>
</div>
</div>
<div id=con><iframe name=container width=100% height=100% src=default.html></iframe></div>
<div id=footer><b>PUP COPYRIGHT 2016<b> <img src="pup.jpg" alt="pup" height="50" width="50"></div>
</div>
Related
I'm using a partial view and if I load a page with the partial view, with CSS stylesheet is reflected as it should be.
But if I delete the Header.css or change something in it, the styling will be the same, according to the following code:
body {
}
#Header{
margin:auto;
height:50px;
width:100%;
padding:20px;
border-radius:5px;
background:linear-gradient(to bottom, #45484d 0%,#000000 100%);
color:white;
text-align:center;
vertical-align:middle;
}
.MenuContainer{
display:inline;
}
h3{
display:inline;
}
#HeaderList {
list-style-type:none;
}
.listForHead{
display:inline;
margin-top:20px;
}
<link type="text/css" rel="stylesheet" href="~/Content/Header.css" />
<script src='#Url.Content("~/Scripts/jquery-3.1.0.min.js")' type="text/javascript"></script>
<script src='#Url.Content("~/Scripts/jquery-ui-1.11.4.min.js")' type="text/javascript"></script>
<div id="Header">
<ul id="HeaderList">
<li class="listForHead">
<div class="MenuContainer">
<h3>Main</h3>
</div>
</li>
<li class="listForHead">
<div class="MenuContainer">
<h3>Methods of delivery</h3>
</div>
</li>
<li class="listForHead">
<div class="MenuContainer">
<h3>About shop</h3>
</div>
</li>
<li class="listForHead">
<div class="MenuContainer">
<h3>Contacts</h3>
</div>
</li>
</ul>
</div>
Here I have a webpage. If I change the size of the browser window this happens: http://gyazo.com/1be5c2f9aae817d0fa2603a51bea5d37 and the smaller the browser window the closer the two banner elements get towards the centre.
I was wondering if anyone could help me stop these two elements from moving towards the centre when the browser window size is changed so that they're simular to the green and blue box on this site: https://woodycraft.net/home/
Here is my CSS Style sheet:
/*CSS FOR ALL PAGES*/
/*BODY/WRAPPER SECTION*/
body {background:url('E:/Documents/CRAFT412-Website/images/SiteBackground.png');
background-repeat: no-repeat;
background-attachment: fixed;}
#wrapper {width: 1000px;
margin: 0 auto;
background-color: white;
border-radius: 5px;
box-shadow: 0px 1px 5px;}
/*TOP BANNER SECTION*/
#logo {margin-top: -90px;
margin-bottom: -95px;
text-align: center;}
#ip {float: left;
margin-left: 458px;
margin-top: -55px;}
#ip_text {float: left;
margin-left: 449px;
margin-top: -51px;
color: white;
font-size: 15px;}
#teamspeak_logo {float:right;
margin-right: 450px;
margin-top: -55px;}
Also here is the HTML for that said page:
<!DOCTYPE HTML>
<html>
<head>
<title>CRAFT412 - Rules</title>
</head>
<!--PAGE LINKS-->
<link href="css/styles.css" rel="stylesheet" type="text/css" media="screen">
<link href="css/rules.css" rel="stylesheet" type="text/css" media="screen">
<!--HTML FOR ALL PAGES-->
<!--BODY SECTION-->
<body>
<!--TOP BANNER SECTION-->
<div id="banner">
<div id="logo">
<img src="images/CRAFT412 - Logo.png" width="500" height="281" alt="CRAFT412">
</div>
<div id="ip">
<img class="top" src="images/CRAFT412 - Box - IP.png" alt="IP">
</div>
<div id="ip_text">
<p>SERVER IP<P/>
<p>craft412.serveminecraft.net<P/>
</div>
<div id="teamspeak_logo">
<a href="ts3server://craft412.serveminecraft.net:9987">
<img src="images/CRAFT412 - Box - Teamspeak.png" alt="TEAMSPEAK"></a>
</div>
</div>
<!--WRAPPER SECTION-->
<div id="wrapper">
<!--TOP NAV BAR SECTION-->
<div id="nav_bar">
<ul>
<li>Home
</li
><li>Status
</li
><li>Info
</li
><li>Gamemodes
<ul>
<li>Survival
</li
><li>Pure-PVP
</li
><li>Gamesworld
</li>
</ul>
</li
><li>Rules
</li
><li>Vote
</li
><li>Contact
</li>
</ul>
</div>
<!--RULES CONTENT-->
<div id="rules_title">
<h3>RULES</h3>
</div>
<div id="global_rules_info">
<h3>GLOBAL RULES</h3>
<p>Global rules follow across the entire server</p>
<p>All players are expected to comply to all of the listed rules or they will be muted, kicked, timed out or banned</p>
</div>
<div id="global_rules">
<h4>Rule listing:</h4>
<ul>
<li>No griefing</li>
<li>No flying. (Unless you've been given a high enough rank)</li>
<li>No unauthorized mod usage</li>
<li>No hacked clients</li>
<li>No cheating</li>
<li>Show all other players respect. Including staff</li>
<li>No begging for rank</li>
</ul>
<p>All rules are enforced by staff in a strict manner</p>
</div>
<div id="punishments">
<h4>Punishments can include:</h4>
<ul>
<li>Privilages taken away</li>
<li>Mutes</li>
<li>Prison (Survival)</li>
<li>Temporary bans</li>
<li>Permanent bans</li>
<li>IP bans</li>
</ul>
</div>
<div id="survival_rules_title">
<h3>SURVIVAL RULES</h3>
</div>
<div id="survival_rules">
<h4>Rule listing:</h4>
<ul>
<li>Global rules</li>
<li>Don't build to close to other peoples creations, keep a reasonable distance</li>
<li>No begging for materials</li>
</ul>
</div>
</div>
<!--HTML FOR ALL PAGES-->
<!--BOTTOM FOOTER SECTION-->
<div id="bottom_footer">
<div id="created_by">
<p>© 2015 GR412</p>
</div>
<div id="social_media_youtube">
<a href="https://www.youtube.com/user/GR412" target="_blank">
<img src="images/CRAFT412 - YouTube Button.png" width="40" height="40" alt="YOUTUBE"></a>
</div>
<div id="social_media_twitch">
<a href="http://www.twitch.tv/gr412" target="_blank">
<img src="images/CRAFT412 - Twitch Button.png" width="35" height="35" alt="TWITCH"></a>
</div>
<div id="social_media_twitter">
<a href="https://twitter.com/GR412" target="_blank">
<img src="images/CRAFT412 - Twitter Button.png" width="55" height="55" alt="TWITTER"></a>
</div>
<div id="social_media_facebook">
<a href="https://www.facebook.com/GR412" target="_blank">
<img src="images/CRAFT412 - Facebook Button.png" width="45" height="40" alt="FACEBOOOK"></a>
</div>
</div>
</body>
</html>
I presume you would like to keep the buttons from moving towards the center?
#ip_text {float: left;
margin-left: 449px; // Try remove this
margin-top: -51px;
color: white;
font-size: 15px;
}
#teamspeak_logo {float:right;
margin-right: 450px; // Try remove this
margin-top: -55px;
}
The solution has been found. The code is below. Thank you to everyone who helped.
The Solution was to clear the float, the code below fixed it for me.
.div#content:after {
content:"";
display:table;
clear:both;
}
Thanks Again.
Original Question
I have 2 Divs, one being "Content" where all the content of my site is in. And another div named "updates". I want the div "content" to resize its height so that all the divs inside of it and fit.
Here's an image explaining my problem easier Imgur Link, Not high enough rep to post image directly.
Here's my full source code (html) (along with the css of content div and updates div.
<html>
<head>
<link rel="stylesheet" type="text/css" href="css/reset.css">
<link rel="stylesheet" type="text/css" href="css/style.css">
<title>MCSocial</title>
<script type="text/javascript" src="src/jquery-1.11.1.min.js"></script>
<script type="text/javascript" src="src/jquery.tinycircleslider.js"></script>
</head>
<body>
<div id="container">
<div id="content">
<nav>
<ul class="nav">
<li class="left">MCFish</li>
<li>Home</li>
<li>News</li>
<li>Members</li>
<li>Media</li>
</ul>
</nav>
<a href="#"><div id="block">
<img src="img/mojang.jpg" height="200px" width="850px">
</div></a>
<a href="#"><div id="block">
<img src="img/minecraft.jpg" height="200px" width="850px">
</div></a>
<div id="updates">
<img src="img/update.png" height="48px" width="140px">
<!--post updates here-->
<h3 class="sub-title">Update 1.5</h3>
<p class="list">Added a new homepage! More simple to navigate! Enjoy!<br>Please send me some feedback here!</p>
<h3 class="sub-title">Update 1.4</h3>
<p class="list">Cleaned up code!</a></p>
<h3 class="sub-title">Update 1.3</h3>
<p class="list">Added new themes! Check them out!</a></p>
<h3 class="sub-title">Update 1.2</h3>
<p class="list">Renamed Site: from MinecraftFishing to MCFish!</a></p>
<h3 class="sub-title">Update 1.0</h3>
<p class="list">Site goes LIVE!</p>
<!--end post updates-->
</div>
<div id="twitter">
<img src="img/twitter.png" height="48px" width="140px"><br><br>
<a class="twitter-timeline" href="https://twitter.com/FluffyRabbitzZ" data-widget-id="544642022154723328">Tweets by #FluffyRabbitzZ</a>
<script>!function(d,s,id){var js,fjs=d.getElementsByTagName(s)[0],p=/^http:/.test(d.location)?'http':'https';if(!d.getElementById(id)){js=d.createElement(s);js.id=id;js.src=p+"://platform.twitter.com/widgets.js";fjs.parentNode.insertBefore(js,fjs);}}(document,"script","twitter-wjs");</script>
</div>
<div id="footer">
<p>©2014. MCSocial. All Rights Reserved.</p>
</div>
</div>
</div>
</body>
</html>
and the CSS;
div#content {
width: 900px;
margin-left: auto;
margin-right: auto;
background-color: #fff;
height: auto;
border-radius: 2px;
min-height: 100%;
position: relative;
}
div#updates {
float: left;
margin-left: 2.6%;
}
Thanks for any help.
You should clear the float.
Add overflow CSS property (for example :auto) to the div#content.
A solution for modern browsers :
.div#content:after {
content:"";
display:table;
clear:both;
}
You have to clear the floating content:
<div style="clear:both"></div>
before closing yout div.content.
I have (jsfiddle):
<body>
<div id="navbar">
<ul class="nav">
<li class="nav_left"><a class="nav" href="#">Home</a></li>
<li class="nav_left"><a class="nav" href="#">Support</a></li>
<li class="nav">
<form class="nav" method="post" action="action.php?do=search">
<input class="search_bar" type="text" name="search_input" />
</form>
</li>
<li class="nav_right"><a class="nav" href="#">Login</a></li>
<li class="nav_right"><a class="nav" href="#">Register</a></li>
</ul>
</div>
</body>
And I have:
html, body {height:100%;margin:0;padding:0;font-size:12px;}
body {background:#F1F1F1;}
#navbar {
width:100%;
padding:5px 0;
overflow:auto;
background:#34495e;
border-bottom:solid 1px #222;
text-align:center;
}
ul.nav {
margin:0;
padding:0;
list-style-type:none;
}
li.nav_left, li.nav_right, li.nav {padding:0 5px;}
li.nav_left {float:left;}
li.nav_right {float:right;}
li.nav {}
I would like to be able to align li.nav to the center without using text-align or margin as I have both float:left and float:right in use, so the float:right would be pushed out of line if they are used.
Hope you can help, thanks.
Use absolute positioning:
html, body {height:100%;margin:0;padding:0;font-size:12px;}
body {background:#F1F1F1;}
#navbar {
position:relative;
width:100%;
height:50px;
padding:5px 0;
overflow:auto;
background:#34495e;
border-bottom:solid 1px #222;
}
ul.nav {padding:0;list-style-type:none;}
li.nav_left, li.nav_right {padding:0 5px;}
li.nav_left {float:left;}
li.nav_right {float:right;}
li.nav {
background-color:green;
width:200px;
height:30px;
position:absolute;
margin:-15px 0 0 -100px;
top:50%;
left:50%;
text-align:center;
}
You need to rearrange your html code:
<body>
<div id="navbar">
<ul class="nav">
<li class="nav_left"><a class="nav" href="#">Home</a></li>
<li class="nav_left"><a class="nav" href="#">Support</a></li>
<li class="nav_right"><a class="nav" href="#">Login</a></li>
<li class="nav_right"><a class="nav" href="#">Register</a></li>
<li class="nav">
<form class="nav" method="post" action="action.php?do=search">
<input class="search_bar" type="text" name="search_input" />
</form>
</li>
</ul>
</div>
</body>
The above code is positioning the LEFT side of li.nav in the middle of #navbar. By using half of the width of li.nav as negative margin, the entire element is positioned in the exact center.
Just a quick example how it could work. You could also make container elements around nav_left and and nav_right and use position:absolute there as well. Inside the container element you can use float for the nav_left and nav_right elements.
http://jsfiddle.net/jCCL7/5/
In your CSS, it is a best to practice to use a "wrapper/container div".
Place all your div inside this wrapper div
.wrapper {
width: 500px;
margin: 0 auto;
}
So your HTML structure should look (not necessary exact) like this.
<body>
<div class="wrapper">
<div class="header">
<div class="content">
<p>"HelloWorld"</p>
</div>
</div>
</div>
</body>
The code above will display all your HTML content on the center of your page.
I have a HTML page like below:
<div id="header-wrapper">
<header class="header" id="header" role="banner">
<div class="logo-slogan-wrapper">
<a href="/d7/" title="Home" rel="home" class="header__logo" id="logo">
<img src="http://localhost/d7/sites/all/themes/zensub/logo.png" alt="Home" class="header__logo-image" />
</a>
<div class="header__name-and-slogan" id="name-and-slogan">
<h1 class="header__site-name" id="site-name">
<span>D7</span>
</h1>
</div>
</div>
<div class="header__region region region-header">
<div id="block-menu-block-1" class="block block-menu-block first last odd" role="navigation">
<div class="menu-block-wrapper menu-block-1 menu-name-main-menu parent-mlid-0 menu-level-1">
<ul class="menu">
<li class="menu__item is-active is-leaf first leaf active menu-mlid-218">Home</li>
<li class="menu__item is-leaf leaf menu-mlid-315">About</li>
<li class="menu__item is-leaf leaf menu-mlid-316">Contact</li>
<li class="menu__item is-leaf last leaf menu-mlid-317">Prestashop News</li>
</ul>
</div>
</div>
</div>
</header>
</div>
And my CSS is :
#header-wrapper{
background:#F7F7F7;
width:100%;
}
#header{
width:1150px;
margin:0 auto;
}
.logo-slogan-wrapper
{
display:inline;
background:#555;
}
.header__region
{
display:inline;
background:#99CC33;
}
#logo,#name-and-slogan,#site-name,#site-slogan
{
display:inline;
}
.menu-block-wrapper{
float:left;
padding:10px 0;
}
.menu li{
display:inline;
list-style:none;
margin-left:10px;
I was expecting the name,slogan and the menu to be inline. But instead , the menu is not coming inline and the background:#99CC33; for div header__region is not changing to the desired background color ! How can I overcome these problems ?
Depending on what you're going for:
.header__region {
float:left;
// or right
}
or
.header__region {
display: inline-block;
}