I don't use min-height command. I want to add data in section area. But I see the situation in this picture. When I am adding bigger things than section area, I see the situation in first picture.
Intented Situation:
<!DOCTYPE html>
<html>
<head>
<title>Sayfa Düzeni</title>
<meta charset="utf-8">
<link rel="stylesheet" href="./script/style.css">
<style>
body{
margin:0;
padding:0;
}
#wrapper{
margin:auto;
max-width:900px;
border-color:black;
border-style:solid;
min-height:500px;
background-color:yellow;
}
header{
max-width:900px;
height:70px;
border-color:gray;
border-style:dashed;
background-color:cyan;
}
nav{
max-width:900px;
height:50px;
border-color:gray;
border-style:dashed;
background-color:pink
}
aside{
float:left;
width:150px;
min-height:280px;
border-color:gray;
border-style:dashed;
background-color:cyan;
}
section{
float:left;
width:738px;
min-height:280px;
border-color:gray;
border-style:dashed;
background-color:white;
}
footer{
float:left;
min-width:894px;
min-height:76px;
border-color:gray;
border-style:dashed;
background-color:pink;
}
</style>
</head>
<body>
</body>
</html>
<!DOCTYPE html>
<html>
<head>
<title>Dağcılık ve Kış Sporları Ürünleri</title>
<meta charset="utf-8">
<link rel="stylesheet" href="./script/style.css">
</head>
<body>
<div id="wrapper">
<header>Header</header>
<nav>
Anasayfa
Hizmetlerimiz
Ürünlerimiz
Biz Kimiz?
İletişim
</nav>
<aside>Yan Menü</aside>
<section>
Section
</section>
<footer>Sayfa Altı</footer>
</div>
</body>
</html>
<!-- begin snippet: js hide: false console: true babel: false -->
for section css;
width: 80.5%;
overflow-y: scroll;
for aside css;
width: 18%;
Related
I'm following an online tutorial for css and wrote the exact code as the instructor yet I'm unable to generate the desired output. I want the heading 'My Website' to have coral background while the output being generated applies coral background to the whole page.
body{
background-color:#f4f4f4;
color:#555;
font-family:sans-serif;
font-size:16px;
line-height:1.6em;
margin:0;
}
.container{
width:80%;
margin:auto;
overflow:hidden;
}
#main-header{
background-color:coral;
color:#fff;
}
<!DOCTYPE html>
<html>
<head>
<title>My Website</title>
<link rel="stylesheet" type="text/css" href="style1.css">
</head>
<body>
<header id="main-header">
<div class="container">
<h1>My Website</h1>
</div>
</body>
</html>
I want the heading 'My Website' to have coral background while the output being generated applies coral background to the whole page.
In my browsers your code even as-is works as you expect it to work. But there's one thing missing anyways. You don't have a closing tag for your header.
body{
background-color:#f4f4f4;
color:#555;
font-family:sans-serif;
font-size:16px;
line-height:1.6em;
margin:0;
}
.container{
width:80%;
margin:auto;
overflow:hidden;
}
#main-header{
background-color:coral;
color:#fff;
}
<!DOCTYPE html>
<html>
<head>
<title>My Website</title>
<link rel="stylesheet" type="text/css" href="style1.css">
</head>
<body>
<header id="main-header">
<div class="container">
<h1>My Website</h1>
</div>
</header>
</body>
</html>
your question is a little bit unclear to me. What did you mean by heading? Did you main the h1 tag or the header tag. If your answer is h1 then I just gave a solution but if it is header then I think your code is generating the correct output in the snippet.
body{
background-color:#f4f4f4;
color:#555;
font-family:sans-serif;
font-size:16px;
line-height:1.6em;
margin:0;
}
.container{
width:80%;
margin:auto;
overflow:hidden;
}
#main-header h1{
color:coral;
}
<!DOCTYPE html>
<html>
<head>
<title>My Website</title>
<link rel="stylesheet" type="text/css" href="style1.css">
</head>
<body>
<header id="main-header">
<div class="container">
<h1>My Website</h1>
</div>
</body>
</html>
So I am using brackets to code and I am very new to programming I put a div element around my image so I could edit it in css but for some reason the width and heights are not changing
h1 {
width: 300px;
margin:400px auto;
color: red;
font-family:Impact ;
}
.character{
width:45px;
height:45px;
}
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="mainc.css">
<script src="javascript.js"></script>
</head>
<body>
<h1>
So I am just testing out stuff on here
</h1>
<div class: "character">
<img src="C:/Users/Nick Malone/Desktop/Downloads/block.jpg">
</div>
</body>
</html>
<div class: "character"> is a wrong notation to assign a class to a div. Try it as <div class="character">
You need to update your css to target the image. See below.
.character img{
width:45px;
height:45px;
}
h1 {
width: 300px;
margin:400px auto;
color: red;
font-family:Impact ;
}
img{
width:45px;
height:45px;
}
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="mainc.css">
<script src="javascript.js"></script>
</head>
<body>
<h1>
So I am just testing out stuff on here
</h1>
<div class= "character">
<img src="http://imgsv.imaging.nikon.com/lineup/lens/zoom/normalzoom/af-s_dx_18-140mmf_35-56g_ed_vr/img/sample/sample1_l.jpg">
</div>
</body>
</html>
Try this
. character img{
width:100px;
height:100px;
display:block;
}
You need to give the width and the height to the image not the div.
h1 {
width: 300px;
margin:400px auto;
color: red;
font-family:Impact ;
}
#character{
width:45px;
height:45px;
}
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="mainc.css">
<script src="javascript.js"></script>
</head>
<body>
<h1>
So I am just testing out stuff on here
</h1>
<div>
<img src="C:/Users/Nick Malone/Desktop/Downloads/block.jpg" id="character">
</div>
</body>
</html>
If I do the following, I notice that <input type='image' /> adds the border to the input, which makes sense because you want the image to fit. But check out that space at the top, it looks like that's a bug.
/* external.css */
html,body{
padding:0; margin:0; background:#000;
}
body{
overflow-y:scroll;
}
.main{
width:980px; margin:0 auto;
}
.cartpal{
width:544px; height:64px; text-align:center; margin:0 auto;
}
#to_cart,#paypal{
background:#eee; border:2px solid #007; font:bold 20px Arial, Helvetica, sans-serif; border-radius:30px;
}
#to_cart{
width:200px; height:64px;
}
#paypal{
width:306px; height:60px;
}
#to_cart:hover,#paypal:hover{
border-color:#fff;
}
#to_cart:active,#paypal:active{
border-color:#fc3;
}
<!DOCTYPE html>
<html xmlns='http://www.w3.org/1999/xhtml' xml:lang='en' lang='en'>
<head>
<meta http-equiv='content-type' content='text/html;charset=utf-8' />
<meta name='viewport' content='width=device-width'>
<title>Is this a Bug?</title>
<link type='text/css' rel='stylesheet' href='external.css' />
</head>
<body>
<div class='main'>
<div class='cartpal'><input id='to_cart' name='to_cart' title='Add to Cart' type='button' value='Add to Cart' /><input id='paypal' name='paypal' title='Pay with PayPal' alt='PayPal - The safer, easier way to pay online!' type='image' src='https://www.paypalobjects.com/webstatic/en_US/i/btn/png/silver-pill-paypalcheckout-60px.png' /></div>
</div>
</body>
</html>
After a simple change to from <input type='image' /> it works as expected. Can't be the white space. It's been removed.
/* external.css */
html,body{
padding:0; margin:0; background:#000;
}
body{
overflow-y:scroll;
}
.main{
width:980px; margin:0 auto;
}
.cartpal{
width:544px; height:64px; text-align:center; margin:0 auto;
}
#to_cart,#paypal{
height:64px; background:#eee; border:2px solid #007; border-radius:30px; font:bold 20px Arial, Helvetica, sans-serif; padding:0;
}
#to_cart{
width:200px;
}
#paypal{
width:306px; background:url(https://www.paypalobjects.com/webstatic/en_US/i/btn/png/silver-pill-paypalcheckout-60px.png);
}
#to_cart:hover,#paypal:hover{
border-color:#fff;
}
#to_cart:active,#paypal:active{
border-color:#fc3;
}
<!DOCTYPE html>
<html xmlns='http://www.w3.org/1999/xhtml' xml:lang='en' lang='en'>
<head>
<meta http-equiv='content-type' content='text/html;charset=utf-8' />
<meta name='viewport' content='width=device-width'>
<title>Is this a Bug?</title>
<link type='text/css' rel='stylesheet' href='external.css' />
</head>
<body>
<div class='main'>
<div class='cartpal'><input id='to_cart' name='to_cart' title='Add to Cart' type='button' value='Add to Cart' /><input id='paypal' name='paypal' title='Pay with PayPal' type='button' /></div>
</div>
</body>
</html>
Here is another behavior I don't fully understand.
/* external.css */
html,body{
padding:0; margin:0; background:#000;
}
body{
overflow-y:scroll;
}
.main{
width:980px; margin:0 auto;
}
.cartpal{
width:544px; height:64px; text-align:center; margin:0 auto;
}
#to_cart,#paypal{
height:64px; background:#eee; border:2px solid #007; border-radius:30px;
}
#paypal{
width:306px; background:url(https://www.paypalobjects.com/webstatic/en_US/i/btn/png/silver-pill-paypalcheckout-60px.png);
}
#to_cart{
width:200px; font:bold 20px Arial, Helvetica, sans-serif;
}
#to_cart:hover,#paypal:hover{
border-color:#fff;
}
#to_cart:active,#paypal:active{
border-color:#fc3;
}
<!DOCTYPE html>
<html xmlns='http://www.w3.org/1999/xhtml' xml:lang='en' lang='en'>
<head>
<meta http-equiv='content-type' content='text/html;charset=utf-8' />
<meta name='viewport' content='width=device-width'>
<title>Is this a Bug?</title>
<link type='text/css' rel='stylesheet' href='external.css' />
</head>
<body>
<div class='main'>
<div class='cartpal'><input id='to_cart' name='to_cart' title='Add to Cart' type='button' value='Add to Cart' /><input id='paypal' name='paypal' title='Pay with PayPal' type='button' /></div>
</div>
</body>
</html>
All I did was only set the font on #to_cart. Since the default font-size is even smaller, why is #paypal now a pixel or 2 from the top? Would not the half-leading on a smaller font be less?
I can do a work arounds, that's not the issue. I'm really just trying to understand why my first and last example exhibit this strange, chaotic behavior. What's the logic? Any help is greatly appreciated.
You need to make your Inputs floating to align in row. Just change your css:
#paypal, #to_cart {
height: 62px;
background: #eee;
border: 2px solid #007;
border-radius: 30px;
float: left;
}
Every browser provide some sort of default implementation to some elements,
Like in your case because of default styling provided by the browser...
input="button"
input="image"
Notice addition 1px of padding to top and bottom, because of default appearance rule by rendering engine of your browser.
input[type="button" i],
input[type="submit" i],
input[type="reset" i],
input[type="file" i]::-webkit-file-upload-button, button {
padding: 1px 6px;
}
here you can see addition padding is applied by browser for input="button" but the same dont exist for input="image"
More about appearance
I am unable to remove default top margin after many attempts. Below is my html and css code. Please suggest where I am lacking?
HTML file
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<link rel="stylesheet" type="text/css" href="style.css">
<title>Sample</title>
</head>
<body>
<div id="maincontainer">
<div id="header">
<h1>Sample</h1>
</div>
</div>
<div id="contents">
Body of page
</div>
</body>
</html>
CSS File
html, body
{
margin:0 auto;
padding:0;
border:0;
background:#fff;
font-family:Times New Roman;
font-size: 16px;
width:1024px;
}
#maincontainer
{
margin:0;
padding:5px;
}
#header
{
margin:0;
padding:0;
height:100px;
background:#8A0808;
text-align:left;
}
h1
{
margin:0;
padding:0 0 0 10px;
font-size: 60px;
font-weight:normal;
color:#fff;
}
padding: 5px; on the #maincontainer might be your issue. There's going to be 5px of white surrounding anything inside of the #maincontainer div.
This is really really weird. Sometimes when I reload it shows where it should be, like this:
When I change the color to Orange or Blue (haven't tested any other colors, that ul is brought down. What's the reason? Thanks for the help!
#topuserbar a
{
color:Orange;
}
Here is the complete CSS and HTML.
body
{
background-image: url('images/test.png');
background-repeat:repeat;
margin:0;
padding:0;
}
#header
{
background-image: url('images/headerBackground.png');
background-repeat:repeat;
width:auto;
}
#headershadow
{
background-color:Black;
min-height:2px;
}
#topuserbar
{
font-family:Georgia;
font-size:large;
float:right;
margin-top:35px;
margin-right:15px;
}
#topuserbar ul
{
}
#topuserbar li
{
display:inline;
margin-left:10px;
color:#fff;
}
#topuserbar .helpicon
{
position:relative;
top:4px;
left:2px;
}
#topuserbar a
{
color:Blue;
}
#topuserbar a:hover
{
color:Yellow;
}
/*****************BODY AREA*******************/
#body
{
border: 1px solid red;
min-height:800px;
width:auto;
margin-left:50px;
margin-right:50px;
}
#leftnavigation
{
border: 1px solid green;
min-height:500px;
float:left;
width:190px;
}
#contentarea
{
border:1px solid blue;
min-height:500px;
float:left;
width:300;
margin-left:5px;
margin-right:5px;
}
#advertisingarea
{
border:1px solid orange;
width:150px;
float:left;
min-height:500px;
}
.advert
{
}
<%# Master Language="C#" Inherits="System.Web.Mvc.ViewMasterPage" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<title><asp:ContentPlaceHolder ID="TitleContent" runat="server" /></title>
<script src="../../Scripts/jquery-1.4.1.min.js"></script>
<script src="../../Scripts/jquery.tipTip.minified.js"></script>
<link href="../../Content/Site.css" rel="stylesheet" type="text/css" />
<link href="../../Content/tipTip.css" rel="stylesheet" type="text/css" />
</head>
<body>
<div id="header">
<img src="../../Content/images/cumaviLogo.png" alt="Cumavi.com - Compras y ventas online en Bolivia!" />
<ul id="topuserbar">
<li>Bienvenidos, <span class="userSalute">Sergio!</span></li>
<li>Mis Anuncios</li>
<li>Perfil</li>
<li>Ayuda<img class="helpicon" src="../../Content/images/helpIcon.png" alt="Help icon." width="20" height="20"/></li>
<li>Cerrar Sesion</li>
</ul>
</div>
<div id="headershadow">
</div>
<div id="body">
<div id="leftnavigation"></div>
<div id="contentarea">sdfg<h1>asdasd</h1></div>
<div id="advertisingarea">
<div class="advert">
<img src="../../Content/images/advertImage.png" alt="Advert" />
</div>
<div class="advert">
<img src="../../Content/images/advertImage.png" alt="Advert" />
</div>
<div class="advert">
<img src="../../Content/images/advertImage.png" alt="Advert" />
</div>
</div>
</div>
<script type="text/javascript">
$(function () {
$(".someClass").tipTip();
});
</script>
<asp:ContentPlaceHolder ID="MainContent" runat="server" />
</body>
</html>
Well, your menu ( #topuserbar ) is floated and is container is not.
You can change lots of things in your css to set a proper floated layout...
- or -
Just change the way you set the position of the menu like :
#topuserbar
{
font-family:Georgia;
font-size:large;
margin-top:35px;
margin-right:15px;
text-align: right;
}
... for example.