I want to achieve this: two decoration elements (sort of waves) on both sides of the screen. Here's what I've got so far. If more elegant solution is possible (like styling with CSS only body element), then please advise.
Below solution would be fine, if both < img > elements would not be visible.
You can check this in action.
Here's the working FIDDLE.
Can you help?
<!doctype html>
<html class="">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link type="text/css" rel="stylesheet" href="styles/style.css" >
<style type="text/css">
.background_left {
background-image:url("http://www.destadesign.com/destacms/images/background_border_left.png");
background-repeat:repeat-y;
background-position:left;
position:absolute;
left:0;
}
.background_right {
background-image:url("http://www.destadesign.com/destacms/images/background_border_right.png");
background-repeat:repeat-y;
background-position:right;
position:absolute;
right:0;
}
.background_left, .background_right {
height:100%;
}
</style>
</head>
<body>
<div class="background_left">
<img src="http://www.destadesign.com/destacms/images/background_border_left.png">
</div>
<div class="background_right">
<img src="http://www.destadesign.com/destacms/images/background_border_right.png">
</div>
<div class="content" style="height:500px;"> <!-- content -->
</div>
</body>
</html>
Just do it like this:
body {
background:url("http://www.destadesign.com/destacms/images/background_border_left.png") left repeat-y,url("http://www.destadesign.com/destacms/images/background_border_right.png") right repeat-y;
}
This CSS adds two background images to body, positions them right or left respectively, and sets the repeat-y, so it doesn't fill the screen.
JSFiddle Demo
Related
<!DOCTYPE html>
<html>
<head>
<title>TMNT - Rancid Tomatoes</title>
<link rel="stylesheet" href="movie.css">
<meta charset="utf-8" />
</head>
<body>
<div class="fit">
<img src="images/rancidbanner.png" alt="Rancid Tomatoes">
</div>
</body>
</html>
so far i have succeeded with
img{
width: 100%;
}
but i want to it make it so only this image fits and not the other ones.
i tried doing it with
img.fit
on my css file, but this just returns it back to normal.
.fit img{
width: 100%;
}
should do it for you. The div's class name is fit, not the image's. Therefore img.fit won't work.
If your image had the class .fit then you could just do
.fit {
width: 100%:
}
If you remove class="fit" from div and add it to img then the effect will be the same for this image as you had for all images before.
You can Go little easier!
Just add width="100%" in <img> tag.
<!DOCTYPE html>
<html>
<head>
<title>TMNT - Rancid Tomatoes</title>
<meta charset="utf-8" />
</head>
<body>
<div class="fit">
<img width="100%" src="https://encrypted-tbn2.gstatic.com/images?q=tbn:ANd9GcR8g4PCYI2ssAVPKlJmC9q4T_k84PE7zOHqAWultSDb-BbSy5YfK-5P0I1f" alt="Rancid Tomatoes" >
</div>
</body>
</html>
In my code class "slides" is working through external css link but class header is working through inline css only.
HTML
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>My Site</title>
<link rel="stylesheet" href="style.css" type="text/css">
</head>
<body>
<div class="slides">
<div class="header" style="width:100%; background-color:#630;"><img src="gz1.gif">
</div>
</div>
</body>
</html>
style.css
head,body{background-color:#CCC; margin:0; padding:0;;}
.slides{
overflow:hidden;
background:-moz-linear-gradient(bottom,red,white);
background:-ms-linear-gradient(bottom,red,white);
background:-o-linear-gradient(bottom,red,white);
background:-webkit-linear-gradient(bottom,red,white);
background:linear-gradient(bottom,red,white);
}
.header{position:fixed;}
I want to work class "header" code from external link instead of inline code...
To avoid inline css in your code, update your html and css like below:
Here we will remove inline styling from header div..
<div class="header"><img src="gz1.gif"></div>
And we will add the inline style of header div in the style.css like so...
head,body{
background-color:#CCC;
margin:0;
padding:0;
}
.slides{
overflow:hidden;
background:-moz-linear-gradient(bottom,red,white);
background:-ms-linear-gradient(bottom,red,white);
background:-o-linear-gradient(bottom,red,white);
background:-webkit-linear-gradient(bottom,red,white);
background:linear-gradient(bottom,red,white);
}
.header{
position:fixed;
width:100%;
background-color:#630;
}
I am trying to do a DIV-box with a height of 60px with bootstrap.
<div class="container" >
<div id="TopRow"class="row">
<div id="TopDiv" class="col-sx12"></div>
</div>
</div>
Then I assign a height to either TopRow or TopCol:
#TopRow{
height:60px;
box-sizing: border-box;
}
I expect to get a row container of 60px. The correct Value is shown for the element, however chrome shows me a height around 80px.
I did not find a ruler feature in IE 11 to check if it is a Browser issue.
Maybe you experienced anything similar?
This is the full code that is giving me the output in the picture. The ruler shows a heigt of about 80px
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Bootstrap Top Box</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.2/css/bootstrap.min.css">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.2/css/bootstrap-theme.min.css">
<style>
#TopRow{
height:60px;
max-height:60px;
box-sizing: border-box;
}</style>
</head>
<body>
<div class="container" >
<div id="TopRow"class="row">
<div id="TopDiv" class="col-sx12"></div>
</div>
</div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.2/js/bootstrap.min.js"></script>
</body>
</html>
Demo (problem doesn't occur)
add max-height
#TopRow{
height:60px;
max-height:60px;
box-sizing: border-box;
}
I finally found the cause of displaying a different height than set in css:
If you zoom your page (even in another window at another time) the developer window will remember and zoom you page to the last used value! No hint shown whatsoever....
Currently I have the below HTML code, as you can see there is no doctype specified:
<html lang="en">
<head>
<title>Website</title>
<meta charset="utf-8" />
<link rel="stylesheet" type="text/css" href="css/main.css" />
<link rel="stylesheet" type="text/css" href="css/style.css" media="screen" />
<!--[if gt IE 7]>
<link rel="stylesheet" type="text/css" href="css/ie.css" media="screen" />
<![endif]-->
<script type="text/javascript" src="js/jquery-1.10.2.js"></script>
<script type="text/javascript" src="js/plugins.min.js"></script>
<link rel="icon" type="image/x-icon" href="img/favicon.ico" />
</head>
<body>
<div class="container">
<div id="searchbar">
<form action="#" method="POST">
<div class="input-append">
<input class="span2" id="appendedInputButton" type="text" />
<button class="btn" type="button">Go!</button>
</div>
</form>
</div>
</div>
</body>
</html>
Mixed with the following style.css file:
#font-face{
font-family: Comfortaa;
src: url('Comfortaa.ttf');
}
body{
background-color: #77d5fb;
background-image: url('bottom_bg.jpg');
background-position: center bottom;
background-repeat: no-repeat;
font-family: Comfortaa;
}
#searchbar{
width:700px;
height:200px;
position:absolute;
left:50%;
top:50%;
margin:-100px 0 0 -350px;
}
Having that code shows my background image just fine however when I add the <!DOCTYPE html> as is required by bootstrap, my background image declaration seems to be "ignored" and only the specified background color is shown.
I have done some testing and found that background-position is causing the issue.
With background-position: center bottom the image will not appear however background-image: center and it will appear but centered at the top of the page and I need it at the bottom.
How can I push down that background image?
Add
html,body{min-height:100%}
to your CSS.
As for the doctype, use this
<!DOCTYPE HTML>
so your document will look somewhat like this working example. Try it and you'll see the image is displayed just the way you want it to be displayed.
<!DOCTYPE HTML>
<html>
<head>
<title>Title Here</title>
<meta charset="utf-8">
<style>
html{
min-height:100%;
}
body{
min-height:100%;
background-color: #77d5fb;
background-image: url('bottom_bg.jpg');
background-position: center bottom;
background-repeat: no-repeat;
font-family: Comfortaa;
}
#searchbar{
width:700px;
height:200px;
position:absolute;
left:50%;
top:50%;
margin:-100px 0 0 -350px;
}
</style>
</head>
<body>
<p id="searchbar">Just testing!</p>
</body>
</html>
Enjoy!
You should always use a doctype, otherwise you will be developing in the scary and unpredictable land called quirksmode, this is nothing you want. I suggest you add:
<!DOCTYPE html>
and try to fix your minor CSS issues with that in place.
I have a very simple holding page I built centering a div, anchor and image. For some reason it will not center in IE8 (either mode), and I am hoping someone can tell me why. I haven't had a chance to try it in other IE browsers. I have tried this in Chrome and FF3 where it works OK.
<html>
<head>
<title>Welcome</title>
<style>
#pageContainer {width:300px;margin:0 auto;text-align:center;}
#toLogo{border:none; }
</style>
</head>
<body>
<div id="pageContainer">
<img src="LOGO_DNNsmall.png" id="toLogo">
</div>
</body>
</html>
I said it was really simple. :)
Thank you,
Brett
Do you really want your page to work in quirks mode? Your HTML centers fine once I added doctype to to force standards mode:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
<head>
<title>Welcome</title>
<style>
#pageContainer {width:300px;margin:0 auto;text-align:center;}
#toLogo{border:none; }
</style>
</head>
<body>
<div id="pageContainer">
<a href="http://portal.thesit.com" id="toSite">
<img src="http://stackoverflow.com/content/img/so/logo.png" id="toLogo"></a> </div>
</body>
</html>
The margin of auto on the sides of the div leave it up to the browser to decide where it goes. There is nothing telling the browser that the div should be centered in the body, or left or right aligned. So it's up to the browser. If you add a directive to the body, your problem will be solved.
<html>
<head>
<title>Welcome</title>
<style>
body { text-align: center;}
#pageContainer {width:300px; margin:0px auto;
text-align:center; border:thin 1px solid;}
#toLogo{border:none; }
</style>
</head>
<body>
<div id="pageContainer">
<a href="http://portal.thesit.com" id="toSite">
<img src="LOGO_DNNsmall.png" id="toLogo">
</a>
</div>
</body>
</html>
I added a 1px border to the div so that you could see what was happening more clearly.
You're leaving it up to the browser because it's in quirks mode. To remove quirks mode, add a doctype definition to the top, like so:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
<head>
<title>Welcome</title>
<style>
#pageContainer {width:300px; margin:0px auto;
text-align:center; border:thin 1px solid;}
#toLogo{border:none; }
</style>
</head>
<body>
<div id="pageContainer">
<a href="http://portal.thesit.com" id="toSite">
<img src="LOGO_DNNsmall.png" id="toLogo">
</a>
</div>
</body>
</html>
Now you'll be able to see your 300 px div center on the page.
Add text-align:center to the body. That should do it when combined with the margin:0 auto on the div.
You can center without using the text-align:center on the body by wrapping the entire page contents in a full-width container & then setting text-align:center on that as well.
<html>
<head>
<title>Welcome</title>
<style>
#container {text-align:center;border:1px solid blue}
#pageContainer {width:300px; margin:0 auto; border:1px solid red}
#toLogo{border:none; }
</style>
</head>
<body>
<div id="container">
<div id="pageContainer">
<img src="LOGO_DNNsmall.png" id="toLogo">
</div>
</div>
</body>
</html>
(I added the container div). It doesn't really change anything though... just an extra div. You still need all the same css properties.
You probably want to change it to the following:
<html>
<head>
<title>Welcome</title>
<style>
body { text-align: center; }
#pageContainer {width:300px;margin:0 auto;}
#toLogo{border:none; }
</style>
</head>
<body>
<div id="pageContainer">
<img src="LOGO_DNNsmall.png" id="toLogo">
</div>
</body>
</html>
The text-align:center; is moved to the body. If you want to place other aligned left content within the div #pageContainer, then you'll need text-align:left; for that class. This is the solution that I have used in quite a few websites now and seems to work across all browsers (it's what Dreamweaver uses in it's starter templates).
FOR BLUEPRINT USERS
This drove my nuts, until i found this post: problem with ie8 and blueprint
Long story short, in you html code change the
<!--[if IE]>
<link rel="stylesheet" href="../css/blueprint/ie.css" type="text/css" media="screen, projection" />
<![endif]-->
for
<!--[if lt IE 8]>
<link rel="stylesheet" href="../css/blueprint/ie.css" type="text/css" media="screen, projection" />
<![endif]-->
Regards
Alex
This works for me on IE6,7,8,FF 3.6.3:
#container
{
width:100%;
}
#centered
{
width:350px;
margin:0 auto;
}
and
<div id="container">
<div id="centered">content</div>
</div>