I need to make my logo and a text box in one line. The logo must be on the left and text box in the middle.
My CSS is:
#charset "utf-8";
body {
background: url("../paveikslai/fonas.jpg") no-repeat top center;
margin: 0;
}
.linija {
background:url("../paveikslai/v_linija.png") repeat-x;
height: 150px;
padding: 10px;
margin: 0;
}
.logotipas {
float: left;
display: inline;
margin: 0 15px;
}
.deze_tekstui {
margin: 0 50%;
}
And HTML is:
<!doctype html>
<html>
<head>
<link rel='stylesheet' type='text/css' href='/stilius/stilius.css'>
<meta charset='utf-8'>
<link rel="icon" type="image/png" href="../paveikslai/favicon.ico">
<title>Minduvos Statyba</title>
</head>
<body>
<div class="linija">
<div class="deze_tekstui">
<img src="../paveikslai/deze_tekstui.png">
</div>
<div class="logotipas">
<img src='../paveikslai/minduva.png' height='120px' width='234px' alt="Minduvos Statyba">
</div>
</div>
</body>
</html>
If you want the logo to appear in a fixed position (top-left), you can't set it to inline.
.logotipas {
margin: 15px;
position: absolute;
top: 0;
}
I recommend Firefox with Firebug, which makes on-the-fly experimentation very easy.
You can use absolute position for the logo and margin auto for the text box, but you will have to define the width for it to work.
body {
background: url("../paveikslai/fonas.jpg") no-repeat top center;
margin: 0;
position: relative;
}
.linija {
background:url("../paveikslai/v_linija.png") repeat-x;
height: 150px;
padding: 10px;
margin: 0;
}
.logotipas {
display:block;
margin: 0 15px;
position: absolute;
top: 10px;
left: 10px;
}
.deze_tekstui {
margin: 0 auto;
width: 500px;
}
Related
when I scroll down on my page, my container overlap the header, but I want my header to overlap the container, so I made my header on a fixed position, but it does not work
here is my html code:
<html>
<head>
<meta charset="UTF-8" />
<script src="script.js"></script>
<link rel="stylesheet" type="text/css" href="styles.css" />
</head>
<body>
<div class="page">
<header class="leheader">
<div id="bloc1"></div>
<img src="https://i.imgur.com/dm6H7GV.png">
<div id="bloc2"></div>
</header>
<main class="container"></main>
</div>
</body>
</html>
and here is my css code:
body,
html,
.page {
background: #666666;
width: 99%;
height: 100%;
}
.leheader {
display: flex;
width: 99%;
position: fixed;
flex: 1 100%;
height: calc(100%-50px);
}
#bloc1 {
margin-left: 1px;
margin-top: 0.5px;
height: 50px;
width: 90px;
background: #cccccc;
border-radius: 10px 0 0 0;
}
#bloc2 {
background: #467491;
margin-top: 4px;
width: 93%;
height: 37px;
}
.container {
position: absolute;
top: 57px;
left: 9px;
background: #cccccc;
width: 99%;
height: calc(100% - 33px);
}
where is the problem ?
Try adding the z-index property to the header.
like this....
z-index: 2
In CSS to make something Fixed position you also need to give it a z-index (which is its position on z-axis). Read more about Z-Index here. Apart from it you also have to give it a position in terms of top, left, bottom and left to tell it where it has to fixed.
.leheader {
display: flex;
width: 99%;
position: fixed;
top:0;
left:0;
z-index:2;
flex: 1 100%;
height: calc(100%-50px);
}
This question already has answers here:
CSS margin terror; Margin adds space outside parent element [duplicate]
(7 answers)
Why does this CSS margin-top style not work?
(14 answers)
Closed 4 years ago.
I have a whitespace on top of my website that i want to remove and dont know how:
body {
border: 0;
padding: 0;
margin: 0;
}
.header {
width: 900px;
height: 100px;
background-color: #5132FF;
text-align: center;
margin-left: auto;
margin-right: auto;
margin-top: 0;
border: 0;
top: 0;
}
<!DOCTYPE html>
<html lang="en">
<head>
<title>DevDoWeb.com</title>
<meta charset="UTF-8">
<meta name="viewport" content="=width=1920, initial-scale=1.0, user-scalable=yes">
<link rel="stylesheet" type="text/css" href="styleSheet.css">
<link href="https://fonts.googleapis.com/css?family=Lato" rel="stylesheet">
</head>
<body>
<div class="header">
<h3 class="headerText">Test</h3>
</div>
</body>
</html>
The dev tools tell me that it cant be maring, padding, or border.... i am really clueless on what to do here, any help is appreciated.
In this case the white space is caused by the margin added from the browser stylesheet to h3. If you remove that by giving h3 a margin of 0, you get rid of the white space.
body {
border: 0;
padding: 0;
margin: 0;
}
.header {
width: 900px;
height: 100px;
background-color: #5132FF;
text-align: center;
margin-left: auto;
margin-right: auto;
margin-top: 0;
border: 0;
top: 0;
}
h3 {
margin-top: 0;
}
<!DOCTYPE html>
<html lang="en">
<head>
<title>DevDoWeb.com</title>
<meta charset="UTF-8">
<meta name="viewport" content="=width=1920, initial-scale=1.0, user-scalable=yes">
<link rel="stylesheet" type="text/css" href="styleSheet.css">
<link href="https://fonts.googleapis.com/css?family=Lato" rel="stylesheet">
</head>
<body>
<div class="header">
<h3 class="headerText">Test</h3>
</div>
</body>
</html>
Try This:
h3 {
margin: 0;
}
body {
border: 0;
padding: 0;
margin: 0;
}
.header {
width: 900px;
height: 100px;
background-color: #5132FF;
text-align: center;
margin-left: auto;
margin-right: auto;
margin-top: 0;
border: 0;
top: 0;
}
h3 {
margin: 0;
}
<div class="header">
<h3 class="headerText">Test</h3>
</div>
In your CSS, make these changes
body {
border: 0;
padding: 0;
margin: 0;
}
.header {
width: 900px;
height: 100px;
background-color: #5132FF;
text-align: center;
margin-left: auto;
margin-right: auto;
margin-top: -20px;
border: 0;
top: 0;
}
You need to remove margin-top from the headerText
body {
border: 0;
padding: 0;
margin: 0;
}
.header {
width: 900px;
height: 100px;
background-color: #5132FF;
text-align: center;
margin-left: auto;
margin-right: auto;
margin-top: 0;
border: 0;
top: 0;
}
.headerText {
margin-top: 0;
}
<div class="header"><h3 class="headerText">Test</h3>
Add this on top of your css file.
* {
margin: 0;
padding: 0;
}
I would strongly recommend using a reset style sheet, one like Eric Meyers. This link also explains what they are and why you should use them.
The code:
<!DOCTYPE html>
<html>
<head>
<title>Slide-Up Dialogue Box</title>
<style type="text/css">
body {
margin: 0;
padding: 0;
height: 100%;
}
#container {
min-height: 100%;
position: relative;
}
#header {
background: #ff0;
padding: 10px;
}
#body {
padding: 10px;
padding-bottom: 60px;
}
#footer {
position: absolute;
bottom: 0;
width: 100%;
height: 30px;
background: #6cf;
}
</style>
</head>
<body>
<div id="container">
<div id="header"></div>
<div id="body"></div>
<div id="footer">
Who is Online?
</div>
</div>
</body>
</html>
How can I place the footer at the bottom of the page? I've tried experimenting with padding, bottom and margin but I haven't been very successful so far. Can someone tell me how to place the footer at the bottom of the page? Thanks
you can do this one sir:
body {
margin: 0;
padding: 0;
height: 100%;
}
#container {
min-height: 100%;
position: relative;
}
#header {
background: #ff0;
padding: 10px;
}
#body {
padding: 10px;
padding-bottom: 60px;
}
#footer {
position: fixed;;
bottom: 0;
width: 100%;
height: 30px;
background: #6cf;
text-align:center;
}
HERE MY CODE
You need to set body height to 100%. Currently the body covers only upto the content you have. There was no explicit height set for the body element.
Since body needs to calculate 100% of the parent element, set html height to 100% as well.
html,
body {
height: 100%;
}
<!DOCTYPE html>
<html>
<head>
<title>Slide-Up Dialogue Box</title>
<style type="text/css">
body {
margin: 0;
padding: 0;
height: 100%;
}
#container {
min-height: 100%;
position: relative;
}
#header {
background: #ff0;
padding: 10px;
}
#body {
padding: 10px;
padding-bottom: 60px;
}
#footer {
position: absolute;
bottom: 0;
width: 100%;
height: 30px;
background: #6cf;
}
</style>
</head>
<body>
<div id="container">
<div id="header"></div>
<div id="body"></div>
<div id="footer">
Who is Online?
</div>
</div>
</body>
</html>
If you aim to "fix" your element to the bottom of the screen, set:
position: fixed;
bottom: 0;
On a side note, it might be a good idea for you to start learning about HTML5 elements like "footer" instead of using divs for everything. Also note that id's are unique and styling is best applied in mass/generically (use classes instead).
I have a small problem. The webpage I'm working on has three areas:
On the left a navigation, which should always be on the left side
A content area in the middle, which should always be in the middle of the browser
The logo area on the right side, which should always be in the top right corner
Here's the code I have right now:
CSS
html, body
{
height: 100%;
min-height:100%;
padding: 0em;
margin: 0em;
}
body
{
font-family: Segoe UI, Arial;
font-size: 12px;
color: #616a71;
line-height: 15px;
letter-spacing: 0.5px;
overflow-y: scroll;
background-color: #CCC;
}
div#navigation
{
position: absolute;
float: left;
width: 220px;
left: 5px;
top: 70px;
z-index: 2;
padding-bottom: 50px;
background-color: red;
}
div#content
{
position: relative;
width: 1014px;
margin: 0 auto;
top: 70px;
padding: 10px;
background-color: #f6f6f3;
box-shadow: 0 0 5px rgba(0,0,0,0.2);
border-radius: 2px;
line-height: 20px;
}
div#right
{
position: absolute;
width: 258px;
right: 0;
top: 0;
background-color: green;
}
HTML
<!DOCTYPE html>
<html lang="de">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=9" />
<title>header</title>
<link href="/style/test.css" rel="stylesheet" type="text/css" media="screen" />
</head>
<body>
<div id="navigation">
nav
</div>
<div id="content">
content
</div>
<div id="right">
logo
</div>
</body>
</html>
Now, when I resize the browser, the content area goes behind the navigation are. What I want to achieve, is that when there is too little space to display the navigation and content area side by side the horizontal scrollbar of the browser should appear.
By using the CSS media queries as the ones specifies below
#media (max-width: 600px) {
// Your code goes here
}
You can specify the CSS to be used for these widths. Change the width accordingly
Try to give the width of divs as %.
div#navigation
{
width: 20%;
}
div#content
{
width: 60%;
}
div#right
{
width: 20%;
}
and float them all to left.
I can't figure out why my nav bar is not going all the way across the top! I'm sure it's a super easy fix. This is for a full page slider. I only included the relevant html/css. hope that is enough!
HTML
<!DOCTYPE>
<link rel="stylesheet" href="style.css" type="text/css" />
<link href='http://fonts.googleapis.com/css?family=Lato:400,700,400italic,700italic,900italic' rel='stylesheet' type='text/css'>
<head>
<title>Full Page Slider</title>
</head>
<nav>
<a id="home">Home</a>
<a id="">About</a>
<a id="">Contact</a>
<div class="sliderButtons"></div>
</nav>
<div id="full-slider-wrapper">
<div id="full-slider">
<div class="slide-panel active ">
Panel 1 content here
</div><div class="slide-panel">
Panel 2 content here
</div>
</div>
</div>
CSS
* { margin:0; padding:0; }
p { margin:5px 0 10px 0; }
html {
min-width: 100%;
font-family: 'Lato', sans-serif;
}
nav {
text-align: left;
margin-left: 16%;
border-bottom-style:ridge;
background-color: FF7400;
}
nav a {
font-size:20px;
text-decoration:underline;
display: inline-block;
padding: 1em;
}
div.sliderButtons {
float: right;
margin-right: 20%;
}
#full-slider-wrapper {
overflow: hidden;
}
#full-slider {
position: relative;
width: 800px;
height: 600px;
margin: 0 auto;
}
#full-slider .slide-panel {
position: absolute;
top: 0;
left: 0;
width: 800px;
height: 600px;
visibility: hidden;
}
#full-slider .slide-panel.active {
position: absolute;
visibility: visible;
}
#full-slider-nav {
position: relative;
top: 0;
right: 0;
}
#full-slider-nav-left, #full-slider-nav-right {
display: inline-block;
height: 0;
width: 0;
margin-left: 15px;
border: 20px solid transparent;
cursor: pointer;
}
Your nav element has margin-left: 16%;. Change or remove that rule.
jsFiddle example
You mean - why it does not take the full width? If so - look closely, your nav selector got a margin-left of 16%
remove margin-left: 16%; & change text-align: left; to text-align:center;
use Div forget about nav
hope it helps you. Enjoy.