I'm working on my first CSS design and I'm having an issue where the background for the header extends past the right of the header.
MWE:
header{
background-color: #FF0000;
padding: 20px;
}
HTML:
<!DOCTYPE html>
<html>
<head lang="en">
<link rel="stylesheet" href="reset.css"/>
<link rel="stylesheet" href="ArtStoreInitial.css"/>
<link href="https://fonts.googleapis.com/css?family=Six+Caps"
rel="stylesheet">
<meta charset="utf-8">
<title>Hypothetical Art Store</title>
</head>
<body>
<header>
<h1>Hypothetical Art Store</h1>
<h2>Super cool tagline will go here</h2>
</header>
If I use display: inline;, it breaks the header completely.
Is there a way to wrap it, give it a margin and give it padding all at the same time? Do I have to hard-code the size? That doesn't seem right.
edit:
box-sizing set to border-box or content-box does nothing
Set the display property to inline-block
header {
background-color: #FF0000;
padding: 20px;
display: inline-block;
}
<header>
<h1>Hypothetical Art Store</h1>
<h2>Super cool tagline will go here</h2>
</header>
Related
Why is my text not being centered when i am using the margin to center it(IT WORKS WHEN I USE - text-align : center) :
here is the code and the screenshot :
<!DOCTYPE html>
<html lang="en" dir="ltr">
<head>
<meta charset="utf-8">
<title>Angad's website</title>
<link rel="stylesheet" href="/Users/angadsinghbedi/Desktop/Web_Development/CSS-MY SITE/css/styles.css">
<link rel="icon" href="favicon.ico">
</head>
<body>
<img src="/Users/angadsinghbedi/Desktop/Web_Development/CSS-MY SITE/images/cloud.png" alt="cloud-image">
<h1>I'm Angad</h1>
<p>a student </p>
<img src="/Users/angadsinghbedi/Desktop/Web_Development/CSS-MY SITE/images/cloud.png" alt="cloud-image">
<img src="/Users/angadsinghbedi/Desktop/Web_Development/CSS-MY SITE/images/mountain.png" alt="mountain-image">
</body>
</html>
CSS TO THIS :
h1{
background-color: #ffe3fe;
margin: 0 auto;
}
RESULT :
You need to set a width as well. In the browser's mind, this is already centered. Here is an example:
h1{
background-color: #ffe3fe;
margin: auto;
width: 8em;
}
I have a simple tag with a banner and a border at the bottom. How can I stop sliding these two elements on zooming? I was looking for a way to get the two elements intact on zoom in and out. Even after a few hours of search, i couldn't get the desired output. I tried this and one more post which says to change from px to em.
My html tag:
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" type="text/css" href="style/style.css" />
</head>
<body>
<div id="header">
<img class="logo" src="./style/logo.jpg" width= 895 height= 160">
</div>
<div id="container-border">
</div>
</body>
css:
#header
{ padding:0 20px;
display:block;
margin:0 auto;
background: #D6D6D6 url(background.jpg) repeat-x;
height: 205px;
width: 1500px;
position: center;
}
#container-border {
width: 1538px;
height:900px;
margin-left:260px;
border-color: black;
border-width: 1px;
border-style: solid;
}
You first need to wrap the content in a containing DIV
HTML
<div class="site-content">
<div id="header">
<img class="logo" src="./style/logo.jpg" width= 895 height="160">
</div>
<div id="container-border">
</div>
</div>
Note the new DIV .site-content. This is where you would center the website content and control the website contents width.
Here's my codepen: https://codepen.io/arlcode/pen/aRpWZo
I would also recommend not using static width/height for mobile dynamic purpose. You're also going to want to use classes more then ID's because ID's are specific but classes allow you to manipulate multiple DIVs at once.
I'm trying to follow a Bootstrap tutorial but the first div I'm creating, that should be spanning the entire width of my browser/device, seems to be limited at ~1000 pixels. Any ideas as to why this is?
Here's my code:
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Testing the Bootstrap 3.0 Grid System</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<!-- Bootstrap -->
<link href="css/bootstrap.min.css" rel="stylesheet" media="screen">
<style>
.col-xs-12 {
height: 100px;
background-color: blue;
color:white;
text-align: center;
}
</style>
</head>
<body>
<div class="container">
<div class="row">
<div class="col-xs-12">.col-xs-12</div>
</div>
</div>
</body>
</html>
Thanks in advance for any help.
If you're using the latest 3.1, you can use the container-fluid class instead of container like this..
<div class="container-fluid">
<div class="row">
<div class="col-xs-12">.col-xs-12</div>
</div>
</div>
3.1 full width: http://www.bootply.com/116382
For Bootstrap 3.0.x you'd need to use a custom container like this...
.container-full {
margin: 0 auto;
width: 100%;
}
3.0 full width: http://www.bootply.com/107715
The container class has a width specified depending on the media query. Your content is within this div so its width is based upon it.
You can see this in the dev tools in all major browsers, find that element and view the CSS styles/properties.
I'm trying to make a website with Twitter Bootstrap, that is basically a single, vertically centered column on top of a background container div (so I can color / image the background on the edges).
I keep having this issue where I can get the background div to fill the enter screen, but the centered column div sets its height to the size of the content. I want it to always, at least, be as tall as the screen size. I thought min-height would do this, but it does not.
Here's what it looks like right now: (it's just a test page for the layout)
Here is the code for it:
HTML
<!DOCTYPE html>
<html lang="en">
<head>
<title>Baileysaurus -- Dinosaurs && Logic in your face!</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link href="/bootstrap/css/bootstrap-responsive.min.css" rel="stylesheet">
<LINK href="header.css" rel="stylesheet" type="text/css">
<LINK href="forum.css" rel="stylesheet" type="text/css">
<!-- jQuery (Bootstrap requires jQuery!) -->
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
<!-- Bootstrap -->
<LINK href="/bootstrap/css/bootstrap.min.css" rel="stylesheet"
media="screen">
<!-- A file of PHP utility functions -->
<?php
include 'functions.php';
?>
</head>
<body>
<!-- Bootstrap -->
<script src="bootstrap/js/bootstrap.min.js"></script>
<div id='background' class='row-fluid'>
<div class='span12'>
<div id='site-column' class='row-fluid span10 offset1 column-wrap'>
<img src="/PipeDog.jpg" alt="ARGUMENT INVALID" />
<hr>
<p>
Put a blog here!
</p>
</div> <!-- END of outermost span12 div -->
</div> <!-- END - "site-column" div -->
</div> <!-- END - "background" div -->
</body>
</html>
CSS
html, body
{
height: 100%;
margin: 0;
}
#background
{
position: absolute;
top:0;
bottom: 0;
min-height: 100%;
min-width: 100%;
background-color: Gainsboro;
}
#site-column
{
top: 0;
bottom: 0;
min-height: 100%;
border-left: 2px solid;
border-right: 2px solid;
background-color: white;
}
.column-wrap
{
overflow: hidden;
}
I'm trying to get the white column in that photo to stretch to the bottom of the screen, at least, even if the content is not that long.
Anyone have any ideas on what I'm missing?
You should also be able to add the following CSS:
.span12 {
height:100%;
}
Try to make your outer <div> to extend to the bottom of the page.
So try this in the css:
.row-fluid
{
position:absolute;
bottom:0;
}
And I'm not sure but you may have to move your
<script src="bootstrap/js/bootstrap.min.js"></script>
line to the <head> part of your page.
I have an IMG tag with an background-image property. Whilst both images display in FF, only the IMG src image displays in IE. At this stage I am not concerned with positioning or anything, I just want both IMG src and background-image displayed on the page.
Here is my basic test HTML:
<html>
<head>
<title>carmen's test page </title>
<style>
.icon {
display: block;
background-image: url('drop-yes.gif');
background-repeat: no-repeat;
padding: 200px 200px 200px 200px;
margin: 20px 20px 20px 20px;
}
</style>
</head>
<body>
<div> <img class="icon" src="drop-no.gif"/> </div>
</body>
</html>
Any help greatly appreciated. Thank you
I wouldn't suggest giving the <img> css class background and a src; rather place it in a <div> instead and manipulate that as you need. You should get a result like this: jsFiddle
I think maybe your Doctype is a problem
Working Example
in this test it works fine in IE with:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<title> Page Title </title>
<meta http-equiv="content-type" content="text/html; charset=ISO-8859-1">
<style type="text/css" media="screen">
.icon {
display: block;
background: url(http://dummyimage.com/450x450/dad/fff&text=yes) no-repeat;
padding: 200px 200px 200px 200px;
margin: 20px 20px 20px 20px;
}
</style>
</head>
<body>
<div> <img class="icon" src="http://dummyimage.com/50x50/444/fff&text=no"/> </div>
</body>
</html>