I'm attempting to insert a vertical line into my code that runs along a certain path of text.
My full code thus far is:
<!DOCTYPE HTML>
<html>
<header>
<title> This Website </title>
<link type="text/css" href="stylesheet.css" rel="stylesheet"/>
</header>
<body>
<div>
<section>
<h1> Test</h1>
</section>
<img src="thingvellir.jpg "class="vinstri" height="300" />
<p>
<div class="vert">**Random text that I want my vertical line to follow.**</div>
</p>
<img src="logo-thing.png" class="haegri" height="100" />
</div>
</body>
</html>
And this is my CSS file:
body {
background-color:green;
}
div{
height:800px;
width: 1300px;
border-color:black;
background-color:#e9b96e;
border-width:2px;
border-style: solid;
border-radius:10px;
margin: auto;
text-align: center;
}
h1 {
margin:auto;
font-size: 35px;
}
section
{
width: 400px;
height: 20px;
padding: 20px;
border: none;
margin: auto;
box-shadow:10px 10px 5px #888888;
background-color: white;
border-radius: 30px;
position:relative;
top: 10px;
}
p {
font-family:Verdana;
font-size:14px;
}
.vinstri {
float:left;
margin:3px;
border:solid black;
}
.vert {
border-left: thick solid #ff0000;
}
Now it's this last attribute that should make the vertical line, but what it does instead of trailing the text, is that it makes a vertical line along the WHOLE ORIGINAL div box (and for some reason adds black border around as well as pushing the text down) as displayed here.
Any ideas on how to fix this one? Thanks.
Your DIV rule applies to every DIV, both the one immediately inside BODY and your DIV.vert. So, the first DIV rule in your CSS, applying the full black border, applies to every DIV in your code. I'm assuming you only want this to apply to the top DIV instead, rather than to everything.
So give that top DIV it's own class, and update that first rule to use the class name.
This way, your DIV.vert box, where you want the red left line won't also pick up the additional CSS rules.
Updated HTML:
<!DOCTYPE HTML>
<html>
<header>
<title> This Website </title>
<link type="text/css" href="stylesheet.css" rel="stylesheet"/>
</header>
<body>
<div class="main">
<section>
<h1> Test</h1>
</section>
<div class="vert">
<img src="thingvellir.jpg "class="vinstri" height="300" />
</div>
<p>
<div class="vert">**Random text that I want my vertical line to follow.**</div>
</p>
<img src="logo-thing.png" class="haegri" height="100" />
</div>
</body>
</html>
And your CSS:
body {
background-color:green;
}
div.main{
height:800px;
width: 1300px;
border-color:black;
background-color:#e9b96e;
border-width:2px;
border-style: solid;
border-radius:10px;
margin: auto;
text-align: center;
}
h1 {
margin:auto;
font-size: 35px;
}
section
{
width: 400px;
height: 20px;
padding: 20px;
border: none;
margin: auto;
box-shadow:10px 10px 5px #888888;
background-color: white;
border-radius: 30px;
position:relative;
top: 10px;
}
p {
font-family:Verdana;
font-size:14px;
}
.vinstri {
float:left;
margin:3px;
border:solid black;
}
.vert {
border-left: thick solid #ff0000;
}
Related
Hey all and thanks for taking the time to read,
I'm trying to create my online portfilo. I would like the navigation bar to have about a 10% margin from the top of the page. However, when I try a vertical scroll bar is added to the browser. I feel like this is something to do with setting the body, html to 100%. However, I'm not sure why the navigation bar isn't just applying that top margin to the content div its in instead of the whole page. All the other elements in the content div work fine.
-----------------------------------------------------------------------------
Below is my Code.
#charset "utf-8";
/* CSS Document */
body, html{
background-color: #000;
width: 100%;
height: 100%;
margin: 0;
padding:0;
}
#content{
background-color: #FF0004;
margin-left: 25%;
margin-right: 25%;
width: 50%;
height: 100%;
}
#nav_bar{
margin-top: 10%;
background-color:#DCB017;
width:100%;
text-shadow: 0px 1px 0px rgba(255,255,255,.3), 0px -1px 0px rgba(0,0,0,.7);
box-shadow: 0px 2px 10px #000;
}
#navigation{
margin-left:5%;
text-align: center;
background-color:#292929;
width:80%;
color: #FFF;
font-family: "BebasNeue", sans-serif;
text-transform:uppercase;
font-size:85%;
}
#navigation a{
border-width:0px;
color: #FFF;
text-decoration:none;
}
#intro{
margin-top: 5%;
font-family: 'Fjalla One', sans-serif;
color: #FFF;
}
.lower{
font-size:240%;
}
.upper{
font-size:300%;
}
#aboutme_tab{
width:100%;
background-color: #149840;
}
h1{
color: #FFF;
bottom:0;
width: 100%;
}
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Portfilo</title>
<link href="stylesheet.css" rel="stylesheet" type="text/css">
<link href='https://fonts.googleapis.com/css?family=Fjalla+One' rel='stylesheet' type='text/css'>
</head>
<body>
<div id = "content">
<div id = "test">
</div>
<div id = "nav_bar">
<div id = "navigation">
<table width="100%" height = "60" border="0">
<tbody>
<tr>
<td width="25%">HOME</td>
<td width="25%">ABOUT</td>
<td width="25%">MY WORK</td>
<td width="25%">CONTACT</td>
</tr>
</tbody>
</table>
</div>
</div>
<div id = "intro">
<span class = "lower"> HI! MY NAMES </span> <span class = "upper"> <b>JAMES HOSKIN</b> </span> <span class = "lower"> AND I'M A <b>SOFTWARE DEVELOPER.</b> </span>
</div>
<h1>ABOUT ME</h1>
</div>
</body>
</html>
This is my first time posting on stackoverflow so sorry if I have posted this incorrectly or unclearly. Please advise me if so. Thanks again for your time.
Nevermind I solved it, I just placed a div with a height of 10% at the top of the page. Thanks anyway.
If you prefer not to add the extra div you could do the following: Remove the margin from the nav_bar and instead add a padding-top of 10% to the #content div, in combination with box-sizing: border-box you will no longer get the scroll bar.
#content{
background-color: #FF0004;
margin-left: 25%;
margin-right: 25%;
width: 50%;
height: 100%;
box-sizing: border-box;
padding-top: 10%;
}
I believe collapsing margins are the reason for the behaviour you're seeing. Essentially, if you have an child element with a top margin within a parent element without a top border or any top padding, the child's margin will be applied to the parent element.
Notice how you don't see any red in the below snippet.
body {
background: #ccc;
padding: 20px;
margin: 0;
}
.parent {
background: red;
}
.child {
background: green;
margin-top: 50px;
}
<html>
<body>
<div class="parent">
<div class="child">
Hello!
</div>
</div>
</body>
</html>
How I'd approach the problem is to remove the top-margin on the navbar completely and add 10% padding-top to the body. You can use box-sizing: border-box to make the height declaration of 100% inclusive of padding:
#charset "utf-8";
/* CSS Document */
body, html{
background-color: #000;
width: 100%;
height: 100%;
margin: 0;
padding:0;
}
body {
padding-top: 10%;
box-sizing: border-box;
}
#content{
background-color: #FF0004;
margin-left: 25%;
margin-right: 25%;
width: 50%;
height: 100%;
}
#nav_bar{
background-color:#DCB017;
width:100%;
text-shadow: 0px 1px 0px rgba(255,255,255,.3), 0px -1px 0px rgba(0,0,0,.7);
box-shadow: 0px 2px 10px #000;
}
#navigation{
margin-left:5%;
text-align: center;
background-color:#292929;
width:80%;
color: #FFF;
font-family: "BebasNeue", sans-serif;
text-transform:uppercase;
font-size:85%;
}
#navigation a{
border-width:0px;
color: #FFF;
text-decoration:none;
}
#intro{
margin-top: 5%;
font-family: 'Fjalla One', sans-serif;
color: #FFF;
}
.lower{
font-size:240%;
}
.upper{
font-size:300%;
}
#aboutme_tab{
width:100%;
background-color: #149840;
}
h1{
color: #FFF;
bottom:0;
width: 100%;
}
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Portfilo</title>
<link href="stylesheet.css" rel="stylesheet" type="text/css">
<link href='https://fonts.googleapis.com/css?family=Fjalla+One' rel='stylesheet' type='text/css'>
</head>
<body>
<div id = "content">
<div id = "test">
</div>
<div id = "nav_bar">
<div id = "navigation">
<table width="100%" height = "60" border="0">
<tbody>
<tr>
<td width="25%">HOME</td>
<td width="25%">ABOUT</td>
<td width="25%">MY WORK</td>
<td width="25%">CONTACT</td>
</tr>
</tbody>
</table>
</div>
</div>
<div id = "intro">
<span class = "lower"> HI! MY NAMES </span> <span class = "upper"> <b>JAMES HOSKIN</b> </span> <span class = "lower"> AND I'M A <b>SOFTWARE DEVELOPER.</b> </span>
</div>
<h1>ABOUT ME</h1>
</div>
</body>
</html>
Background: I am creating a chat-room page in html/css. The div rm-container contains an area where messages are displayed(div class rm-messages), an area to input the message, as well as a div which contains all the users currently in the chatroom (rm-users).
Problem: I would like rm-users to be on the top right of rm-container, but I am unable to get it to work. I followed the tutorial on positioning from w3schools and in my css, changing rm-container position to relative, and rm-users position to absolute, yet I am unable to get the desired result. Instead, what I get is rm-users it is below rm-messages, as would be expected if the default position had not been changed. I have attached both the css and html files below.
#import url(https://fonts.googleapis.com/css?family=Open+Sans+Condensed:300);
body {
background-color: #F0F0E6;
font-family: 'Open Sans Condensed', sans-serif;
margin: 0;
padding: 0
}
.rm-name {
font-size: 20px;
margin-left:auto;
margin-right:auto;
margin-top:15px;
text-align:center;
max-width:100px;
}
.userbox {
border: 1px solid black;
max-width:300px;
padding-bottom:50px;
margin-left:15px;
margin-top:15px;
}
.rm-container {
position:relative;
background-color: white;
border: 1px groove black;
margin-left:auto;
margin-right: auto;
margin-top: 40px;
max-width: 1000px;
padding-bottom: 100px
}
.rm-messages {
position:static;
border: 1px groove black;
margin-top:10px;
max-width: 700px;
margin-left:15px;
height:400px;
}
.rm-users {
position:absolute;
margin-top: 15px;
border: 1px groove black;
margin-right: 15px;
width: 200px;
height: 50px;
overflow-y: scroll;
overflow-x: scroll;
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>room-name</title>
<link rel="stylesheet" href="../public/css/room.css">
</head>
<body>
<img src="something" class="chat_room_pic">
<div class="rm-userbox">
<img src="something" class="userPic">
<h3 class="userName">Username | more chatrooms</h3>
</div>
<div class="rm-container">
<div id="rm-name"> room-name </div>
<div class="rm-messages">
<ul class="messages">
<li>
<div class="msgbox">
<div class="pic"><img src="something>">Username </div>
<div class="msg"><p>Hello there!</p></div>
</div>
</li>
</ul>
</div>
<div class="rm-users">
<ul class="users">
<li><img src="something">
</div>
</div>
</body>
</html>
Just add top: -70px to .rm-users
.rm-users {
border: 1px groove black;
height: 50px;
margin-right: 15px;
margin-top: 15px;
overflow: scroll;
position: absolute;
top: -70px;
width: 200px;
}
Scenario
I've got the following code:
html body{
font-family:Arial,Verdana,Geneva;
background-color:white;
}
.title{
background-color:red;
color:white;
position:fixed;
top:0;
left:0;
width:100%;
line-height:30px;
padding-top: 10px;
padding-bottom: 10px;
padding-left: 10px;
box-shadow: 0px 4px 4px 0px grey;
}
<!DOCTYPE html>
<html>
<head>
<title> Material design!</title>
</head>
<body>
<div class="container">
<div class="title"><img src='http://stubborn.altervista.org/options.png'> Material design!</div>
</div>
</body>
</html>
What the code should do
Displaying a fixed header with the title "Material Design!" and an icon
What isn't working
Text and icon are not aligned
My question
How can I solve this problem?
As you can see if you add a yellow outline to the image, they are aligned. The bottom of the image sits on the same line as the text.
html body{
font-family:Arial,Verdana,Geneva;
background-color:white;
}
.title{
background-color:red;
color:white;
position:fixed;
top:0;
left:0;
width:100%;
line-height:30px;
padding-top: 10px;
padding-bottom: 10px;
padding-left: 10px;
box-shadow: 0px 4px 4px 0px grey;
}
img { outline: solid yellow 1px; }
<!DOCTYPE html>
<html>
<head>
<title> Material design!</title>
</head>
<body>
<div class="container">
<div class="title"><img src='http://stubborn.altervista.org/options.png'> Material design!</div>
</div>
</body>
</html>
You can adjust that with vertical-align:
html body{
font-family:Arial,Verdana,Geneva;
background-color:white;
}
.title{
background-color:red;
color:white;
position:fixed;
top:0;
left:0;
width:100%;
line-height:30px;
padding-top: 10px;
padding-bottom: 10px;
padding-left: 10px;
box-shadow: 0px 4px 4px 0px grey;
}
img { outline: solid yellow 1px; vertical-align: top; }
<!DOCTYPE html>
<html>
<head>
<title> Material design!</title>
</head>
<body>
<div class="container">
<div class="title"><img src='http://stubborn.altervista.org/options.png'> Material design!</div>
</div>
</body>
</html>
… but ultimately you'll probably want to edit the image to adjust the amount of whitespace it has in it.
Try
.title img{
vertical-align: middle;
}
You just need to vertically align the icon:
html body{
font-family:Arial,Verdana,Geneva;
background-color:white;
}
.title{
background-color:red;
color:white;
position:fixed;
top:0;
left:0;
width:100%;
line-height:30px;
padding-top: 10px;
padding-bottom: 10px;
padding-left: 10px;
box-shadow: 0px 4px 4px 0px grey;
}
.title img {
vertical-align: middle;
}
<!DOCTYPE html>
<html>
<head>
<title> Material design!</title>
</head>
<body>
<div class="container">
<div class="title"><img src='http://stubborn.altervista.org/options.png'> Material design!</div>
</div>
</body>
</html>
you can use this code
html body{
font-family:Arial,Verdana,Geneva;
background-color:white;
}
.title{
background-color:red;
color:white;
position:fixed;
top:0;
left:0;
width:100%;
line-height:30px;
padding-top: 10px;
padding-bottom: 10px;
padding-left: 10px;
box-shadow: 0px 4px 4px 0px grey;
}
span{
background-image: url("http://stubborn.altervista.org/options.png");
background-repeat: no-repeat;
background-position: center left;
padding-left: 30px;
cursor: pointer;
}
<!DOCTYPE html>
<html>
<head>
<title> Material design!</title>
</head>
<body>
<div class="container">
<div class="title"><span> Material design!</span></div>
</div>
</body>
</html>
or you can float left image an change padding left.
or you can vertical-align: middle for image
good luck
I am using visual studio 2013
I am trying to make a website divided like this
this is my Html code;
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<title>My Website</title>
<link href="Styles/StyleSheet.css" rel="stylesheet" type="text/css" />
</head>
<body>
<form id="form1" runat="server">
<div id ="wrapper">
<div id =" banner">
</div>
<div id="navigation">
</div>
<div id="content">
</div>
<div id ="sidebar">
</div>
<div id=" footer">
<p> AlL rights reserved.</p>
</div>
</div>
</form>
</body>
</html>
and this is th css code
body
{
font-family:'Calibri',Verdana , sans-serif;
background-color: #e9e9e9;
}
#wrapper
{
width: 1080px;
margin: 0 auto;
padding: 10px;
border: 5px solid #dedede;
background-color: #fff;
}
#banner
{
height:200px;
border: 3px solid #E3E3E3;
}
#navigation
{
height: 60px;
border: 3px solid #e3e3e3;
margin-top: 20px;
}
#content
{
float:left;
width: 750px;
margin: 20px 0 20px 0;
padding : 10px;
border: 3px solid #e3e3e3;
}
#sidebar
{
float:right;
width: 250px;
height: 400px;
margin: 20px 10px 20px 10px;
border: 3px solid #e3e3e3;
}
#footer
{
clear:both;
width:auto;
height:40px;
margin-top:20px;
}
the problem that it apear like this:
can any one help ? I dont know where is the problem
Demo Fiddle
Nice and simple
Add overflow:hidden; to #wrapper, this wil stop your floated elements from extending beyond the underlying parent without forcing its expansion.
Update:
If you want to ensure correct flow with your layout, wrap the content and sidebar elements in another div with overflow:hidden set (per jsfiddle link above)
It is happen because you have lost layout. Please read about "HasLayout" on the web to avoid this in future
Add please
CSS
#wrapper {
overflow:hidden
}
I have been recently designing some content which needs to be side by side and have the height automatically resize, but the height doesn't resize. The div doesn't expand to the size of the items inside of it. Is there a way to allow the div to expand to the size of the elements inside of it?
CSS
* {
padding: 0px;
margin: 0px;
}
body {
font-family: 'Metrophobic', sans-serif;
background-color: #c5c5c5;
background-image: url('../images/noise.png');
}
#container {
width:900px;
background-color: #dbdbdb;
margin-top: 20px;
margin-left: auto;
margin-right: auto;
margin-bottom: 20px;
box-shadow: 0px 0px 5px black;
}
.center_align {
display: inline-block;
margin-left: auto;
margin-right: auto;
}
#header {
height:80px;
font-size: 60px;
padding: 10px;
text-align: center;
}
#menu {
width:900px;
height:50px;
margin-top: 10px;
margin-bottom: 10px;
background-color: #cacaca;
}
.menu_link {
width:224px;
height:50px;
text-align: center;
font-size: 35px;
float: left;
opacity: 0.3;
background-color: #cacaca;
}
.menu_divider {
width: 1px;
height: 50px;
background-color: #dbdbdb;
float:left;
}
#content {
width: 900px;
height: auto;
padding: 10px;
font-size: 20px;
height: auto;
}
.line_container {
margin-top:5px;
margin-bottom:5px;
}
#footer {
width:900px;
height:22px;
padding-top:2px;
text-align: center;
font-size: 14px;
color:black;
}
a:link {
color:black;
text-decoration: none;
}
a:visited {
color:black;
text-decoration: none;
}
a:hover {
color:black;
text-decoration: none;
}
a:active {
color:black;
text-decoration: none;
}
a.link:link {
color:#21525e;
}
a.link:visited {
color:#21525e;
}
a.link:hover {
color:#307f91;
text-decoration: underline;
}
a.link:active {
color:#307f91;
text-decoration: underline;
}
HTML
<html>
<head>
<title>Home</title>
<link rel="shortcut icon" href="../images/favicon.ico" />
<link href="http://fonts.googleapis.com/css?family=Metrophobic" rel="stylesheet" type="text/css" />
<link href="../css/style.css" rel="stylesheet" type="text/css" />
<style type="text/css">
.icon {
width:100px;
height:100px;
border: 3px solid white;
border-radius:25px;
margin-left:10px;
margin-right:10px;
background-position: center center;
background-size: 100px 100px;
}
</style>
</head>
<body>
<div id="container">
<div id="header">
<div class="center_align">
<img src="../images/header_icon.png" alt="header_icon" width="80" height="80" style="margin-right:20px;float:left;" />
<div style="height:80px;float:left;">Title</div>
</div>
</div>
<div id="menu">
Home
<div class="menu_divider"></div>
Tutorials
<div class="menu_divider"></div>
About
<div class="menu_divider"></div>
Contact
</div>
<div id="content">
<div style="width:900px;">
<div class="icon" style="background-image:url('image.jpg');float:left;"></div><div style="float:left;margin-top:20px;">I'm a freelance Web, Iphone, and Game developer.</div>
</div>
</div>
<div id="footer">
© Cameron
</div>
</div>
</body>
</html>
Looks like the problem is that the #footer element isn't properly cleared. Add clear: both; to #footer. This pushes the cleared element below the floated elements, and should functionally result in the same visual fix.
The "container div" basically "forgets" that it is the container for them, so simply add an overflow:auto; to make it remember.
I also tend to add zoom:1 for IE.
The problem is that you are floating elements, and that causes problems with wrapping divs per default (pretty much...).
Here is a working solution, where overflow:hidden is added to the wrapping div: http://jsfiddle.net/s2dxw/2/
The float issue is pretty confusing, and has had a couple of solutions in the past. Here's a good read regarding floats in HTML: http://css-tricks.com/all-about-floats/
Alternatively, you can put some element with the rule clear: both; inside and at the end of the wrapping div.