I'm making a model of a website in HTML and Css and I do not know how to remove this little space on my div element
I've tried to put padding and margin to 0 but nothing happens
Here's my CSS code
body{
padding-left:269px;
padding-right:269px;
background-color:black;
margin: 0;
}
.blanco{
background-color: #fff;
height:780px;
width: 1366px;
padding:0;
margin:0;
}
The div element is named "blanco"
The arrows are a CSS too
Here's the HTML:
<div class="setaEsquerda">
<img src="images/Path Copy.svg" alt="">
</div>
<div class="setaDireita">
<img src="images/Path.svg" alt="">
</div>
and here's the css
.setaEsquerda{
position: absolute;
top: 42.1%;
border-radius: 5px;
margin-left: 36px;
}
.setaDireita{
position: absolute;
top: 42.1%;
border-radius: 5px;
margin-left: 1290px;
}
You are specifing the size of your div.blanco .. Any bigger screen than that will also show the <body> behind it, if .blanco ends there.
I am just assuming and i think the issue you have may be because of these arrows. They are pushing the other content down.
You may want to divide the body into 3 section, then apply the style you want and it should be affective
<body>
<div class="main">
<div class="left-col">arrow left</div>
<div class="content">
<h1>Some text</h1>
<button>Hey</button>
</div>
<div class="right-col">arrow right</div>
</div>
</body>
<style>
.main {
display: grid;
grid-template-columns: auto 1fr auto;
}
</style>
</html>
try not to give a size for your Blanco Class in your CSS code.
.blanco{
background-color: #fff;
padding:0;
margin:0;
}
Related
I am pretty new at HTML, and I am experimenting with some div tags to move along when zooming in or out the page. The structure of my HTML code is:
<header>
<div class="header">
<div class="title">
<h1>Here goes a title</h1>
</div>
<div class="logo">
<img class="logo" src="my/image/path.png">
</div>
</div>
</header>
And the corresponding CSS code:
header{
padding-left: 260px;
padding-top: 65px;
padding-right: 0px;
padding-bottom: 20px;
}
.title{
float: left;
width: 50%;
}
img.logo{
width: 243.77px;
height: 73.43px;
padding-top: 3px;
position: absolute;
}
Both my title and the logo image moves when zooming.
Any help would be appreciated.
Regards.
That is because you use the padding-left to change the position of the full header, but also you use the px unit which makes its position seems keep changing in different screen size.
A solution is to use percentage instead or use media screen query.
An off-topic suggestion, it is not always a good practice to use padding to change position, use margin is always better.
*This is an example use percentage you could change based on what you want.
header{
padding-left: calc(20vw);
padding-top:calc(5vh);
padding-right: 0;
padding-bottom: calc(10vh);
}
.title{
float: left;
width: 50%;
}
img.logo{
width: 243.77px;
height: 73.43px;
padding-top: 3px;
position: absolute;
}
<header>
<div class="header">
<div class="title">
<h1>Here goes a title</h1>
</div>
<div class="logo">
<img class="logo" src="my/image/path.png">
</div>
</div>
</header>
I'm at a project where I need all images within a div to be placed at the same place for an animation where I've put the images to be absolute to stack on top of each other though this interupts the rest of the code when scaling the page.
Example start -
HTML
<div class="a b">
<div class="c d">
<div class="e">
<img class="f" src="" alt="image"/>
</div>
</div>
<div class="c d">
Some content
</div>
</div>
CSS
.a {
clear: both;
padding: 0px;
margin: 0px;
width: 100%; }
.b:before,
.b:after {content:""; display: table; }
.b:after {clear:both; }
.c {
display: block;
float: left;
margin: 1% 0 1% 0%;
}
.d {
margin: 0;
padding: 0;
width: 50%;
}
.e {
position: relative;
margin: 100px auto;
width: 100%;
max-width: 640px;
height: auto;
max-height: 640px;
vertical-align: center;
}
.f {
position: absolute;
margin: 0;
padding: 0;
}
Example end -
As said this works great on fullscreen but when resizing the second class="c d" appears overlapped by the first class="c d" and I would like them to be stacked underneath eachother instead as the did before I created class="f", is there any way to do this with pure css?
to make child absolute within parent you need to wrap the child with div with position relative.
for elements with position set to relative or absolute there is no direct way to prevent them from over layering, you can prevent them by calculating left and top values.
a work around is to use a blocking div. do that wrap your absolute positioned element with normal div and set its height to a value suitable to your needs check this plunker.
note the div with .absolute-parent class
also note the div with .blocking-div class
check this plunker
https://plnkr.co/edit/dT1cC8YAY1ENYfhRvncs?p=preview
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="style.css">
<script src="script.js"></script>
</head>
<body>
<h1>Absolute Positioning</h1>
<div class="absolute-to-page">
to page
</div>
<div class="my-cont">
<div class="blocking-div">
<div class="absolute-parent">
<div class="absolute-to-parent">
to parent
</div>
<div class="absolute-to-parent obj-2">
object two
</div>
</div>
</div>
<div class="absolute-parent">
<p>Some other content</p>
</div>
<div>
<p>Some other content 2</p>
</div>
</div>
</body>
</html>
and the css code
/* Styles go here */
.my-cont{
border:1px solid blue;
min-height:400px;
margin-top:200px;
}
.absolute-to-page{
position:absolute;
width:40px;
height:40px;
background:green;
top:0;
}
.absolute-parent{
position:relative;
}
.absolute-to-parent{
position:absolute;
width:40px;
height:40px;
background:red;
top:0;
}
.obj-2{
left:50px;
}
.blocking-div{
height:40px;
}
First question so sorry if this is a bit squiffy.
I'm trying to get a full (100%) width fixed header with content within, such as logo and navigation links, that is aligned to the main container. I'd like to do this without the use of margining left or right on the logo/nav content as that doesn't seem particularly flexible.
I tried putting the header div within the container block, that fixes the alignment issue but then I can no longer go full width.
So basically how do I get content in a full width fixed header to align with content in the main content of the page?
Here is my html (sorry if its messy, I've only been at this a week or so):
<body>
<div id="header">
<div id="logo">
</div>
<div id="nav">
</div>
</div>
<div id="container">
<div id="content">
</div>
</div>
<div id="footer">
</div>
</body>
Here is my CSS, I left the logo image out and in place is just a beige block:
body {
margin: 0px;
background-color: darkgray;
}
#header{
width: 100%;
height: 100px;
position: fixed;
top: 0px;
background-image: url("images/bg-header.jpg");
opacity: 0.9;
}
#logo {
height: 100%;
width: 300px;
background-color: beige;
}
#container {
width: 960px;
margin: 0px auto;
height: 1000px;
background-color:gray;
}
#footer{
width: 100%;
height: 100px;
background-image: url("images/bg-header.jpg");
}
Any advice?
Thank-you
Add an inner wrapper to your header HTML
<body>
<div id="header">
<div id="header_inner"><!-- inner div -->
<div id="logo">
</div>
<div id="nav">
</div>
</div><!-- end inner div-->
</div>
<div id="container">
<div id="content">
</div>
</div>
<div id="footer">
</div>
</body>
Then add the same width styling as your container to the wrapper:
#header_inner{
width: 960px;
margin: 0px auto;
}
Then the main content and your header content will align.
Some side notes:
classes are always better than IDs for styling
fixed width are generally not a great idea if you're going for a responsive solution
For Fixed Header or Footer you can use
.header_class {
width: 100vw;
float: left;
position: fixed !important;
top: 0px;
background: url: ('images/img.png') no-repeat;
height: 100%;
}
another better suggestion you can follow facebook header css means upper blue section css (css class name: .fixed_elem, .fixed_always)
I had a little trouble understanding what exactly you were looking to do so I made this example which shows a full page with header and one contained within the middle content area. The main problem I saw was that when you do things like width:100% it doesnt do 100% it is allowed.. but the full width of the parent element. You can use width:inherit to get the max width allowed. Here is the example with a full white header width and one contained using black. Its all in how you structure the parent child DOM relationship structure
<!doctype html>
<html>
<head>
<style>body {margin: 0px;background-color: darkgray;}
header{background-color: white;height:100px;width:100%;}
#header{width: inherit;height: 100px;position: fixed;top: 0px;background-image:url("images/bg-header.jpg");opacity: 0.9;background-color: black;}
#logo {height: 100%;width: 300px;background-color: beige;}
#container {width: 960px;margin: 0px auto;height: 1000px;background-color:gray;}
#footer{width: 100%;height: 100px;background-image: url("images/bg-header.jpg");}
</style>
</head>
<body>
<header><div></div></header>
<div id="container">
<div id="header">
<div id="logo"></div>
<div id="nav"></div>
</div>
<div id="content"></div>
<div id="footer"></div>
</div>
</body>
</html>
The easiest solution is to add a container inside the #header. Create a class .container that has the properties shared by the #container and this container. Also make sure that the container inside the #header gets 100% height.
.container {
width: 960px;
margin: 0 auto;
}
#header .container {
height: 100%;
}
body {
margin: 0;
background-color: darkgray;
}
#header {
width: 100%;
height: 100px;
position: fixed;
top: 0;
background-image: url("http://placehold.it/100x100");
opacity: 0.9;
}
#logo {
height: 100%;
width: 300px;
background-color: beige;
}
#container {
height: 1000px;
background-color: gray;
}
#footer {
height: 100px;
background-image: url("http://placehold.it/100x100");
}
.container {
width: 960px;
margin: 0 auto;
}
#header .container {
height: 100%;
}
<div id="header">
<div class="container">
<div id="logo">
</div>
<div id="nav">
</div>
</div>
</div>
<div id="container" class="container">
<div id="content">
</div>
</div>
<div id="footer">
</div>
Basically you want to have a full width 100px header and footer which are fixed to top 0 and bottom 0. but at the same time you want the content to not exactly roll under the header and footer. I hope I understood the question here.
To achieve that obviously give position fixed to header and footer but now to get your content aligned right, you have to give a margin of the height of header and footer ( 100px)
Here is the code snippet... I have added different colors and some filler content to see the difference.
body {
margin: 0px;
background-color: darkgray;
}
#header,
#footer {
width: 100%;
height: 100px;
position: fixed;
left: 0;
background: blue;
opacity: 0.5;
text-align: center;
color: red;
}
#header {
top: 0;
}
#footer {
bottom: 0;
}
#logo {
height: 100%;
width: 300px;
background-color: beige;
float: left;
}
#nav {
height: 100%;
width: 450px;
background: cyan;
opacity: 0.5;
float: right;
}
#container {
width: 960px;
margin: 100px auto;
height: 1000px;
background-color: orange;
}
<div id="header">
<div id="logo">logo</div>
<div id="nav">nav</div>
</div>
<div id="container">
<div id="content">
content
<br>content
<br>content
<br>content
<br>content
<br>content
<br>content
<br>content
<br>content
<br>content
<br>content
<br>content
<br>
</div>
</div>
<div id="footer">footer</div>
Hope this was what you were looking for.
I've had this problem many times before, where you want full width images, but they're in containers at a fixed width. At any rate there's a few things you can do here. You can add a container class to every section you want in a container; You put a mini-container in divs you want to break the rules, (this also requires taking said div / #header out of the main #container)
#header {
width: 100%;
height: 100px;
position: fixed;
top: 0px;
background-image: url("images/bg-header.jpg");
opacity: 0.9;
}
Than put a div inside of that called content, and set content up like this.
.content {
width: 960px;
margin:0 auto;
display:block;
}
So your markup/html should look like
<div id="header">
<div class="content">
<ul>
<li><a>Home</a></li>
<li><a>Other</a></li>
</ul>
</div>
</div>
There are more options, but these seem to make sense for this issue.
Hope This Helps,
-Alex
http://i.imgur.com/Veauoig.png
I am currently trying to work out how to make the 'From £' text to keep in the same position as the buttons above. The page is responsive so I have been unable to keep the text in one position.
The CSS I have used so far -
element.style {position: absolute; width: 97%;}
I put each of the 'From £' parts in their own class. Not sure if there is an easier way?
<div class="price2">From £300</div>
Any help would be great. Thanks!
Add a container for the element for the price and button so that they remain in context with each other.
http://jsfiddle.net/05orkj1a/
.prices{
width: 100%;
}
.price-column{
display: table-cell;
width: 33%;
text-align: center;
margin: 0 auto;
padding: 0 5px;
}
<div class="prices">
<div class="price-column">
<button>Bass</button>
<div class="price2">From £65</div>
</div>
<div class="price-column">
<button>Mid</button>
<div class="price2">From £300</div>
</div>
<div class="price-column">
<button>Treble</button>
<div class="price2">From £715</div>
</div>
</div>
You could also Float the columns left to cause them to collapse vertically as the screen shrinks with the same html. Just change the margin or padding depending on how far apart you want them spaced
http://jsfiddle.net/z6agt11e/
.prices{
width: 100%;
overflow: hidden;
}
.price-column{
display: block;
float: left;
text-align: center;
padding: 5px 5px;
}
You can also add an outer container and then create a inner container for each button-price set.
Here is the HTML code:
<div class="outter">
<div class="block">
<div class="button">button1</div>
<div class="price2">From £65</div>
</div>
<div class="block">
<div class="button">button2</div>
<div class="price2">From £300</div>
</div>
<div class="block">
<div class="button">button3</div>
<div class="price2">From £715</div>
</div>
</div>
Here the CSS:
.outter{
width:100%;
}
.block{
width:33%;
background-color: yellow;
float:left;
text-align: center;
}
And here a jsfiddle:
http://jsfiddle.net/SoniaGM/ej4mdwx9/1/
Hope it helps.
You can use the CSS3 ::after pseudo-selector.
Give at button class:
position: relative;
Then you have to write something lime this:
.button-class::after {
content: 'From £300';
background: transparent;
height: 1%;
width: 3%;
position: absolute;
top: 20px;
left: 0px;
}
Obviously, you have to change height: 1%; width: 3%; and top: 20px; left: 0px;with whatever you want!
I have three div tags and i want to make space between the div tags vertically and also want my first div tag as a fixed one.
When i set my first div position as not a fixed one, i can able to make vertical space.
<html>
<head>
<title>div</title>
</head>
<body style="margin: 0; padding: 0;">
<div style="width:100%; background-color:Lime;">
<div style="width:100%; height:10%; background-color:Blue;">
a
</div>
<div style="width:70%; height:100%; background-color:Gray; margin: auto; margin-top: 2em; margin-bottom: 2em;">
b
</div>
<div style="width:100%; height:5%; background-color:Aqua;">
c
</div>
</div>
</body>
</html>
When i change my "div a" position as fixed , both "div a" and "div b" came down from the margin-top: 2em.
<html>
<head>
<title>div</title>
</head>
<body style="margin: 0; padding: 0;">
<div style="width:100%; background-color:Lime;">
<div style="width:100%; height:10%; background-color:Blue; position: fixed;">
a
</div>
<div style="width:70%; height:100%; background-color:Gray; margin: auto; margin-top: 2em; margin-bottom: 2em;">
b
</div>
<div style="width:100%; height:5%; background-color:Aqua;">
c
</div>
</div>
</body>
</html>
Please help me to make my "div a" as fixed and to make space between "div a and b".
In order to keep div.a (the fixed one) to the top of the page, add top: 0; and if you want it to stay on top of the rest of the content, include z-index: 2;.
In order to add spacing between div.a and div.b you are going to have to put a container div around div.b and appropriate padding to it. If you just put padding on the main container div it will offset div.a.
If possible, set a definitive height to div.a, instead of a percentage, as this will make the vertical alignment of div.b and it's container much easier. That way you can set the margin-top for div.b to be the height of div.a.
Below is the CSS and HTML refactored for better readability:
/* CSS */
* {
margin: 0;
padding: 0;
}
div {
width: 100%;
}
div.container {
height: 100%;
}
div.container,
div.b-container {
background-color: lime;
}
div.a {
height: 70px;
background-color: blue;
position: fixed;
top: 0;
z-index: 2;
}
div.b-container {
position: relative;
padding-top: 2em;
margin-top: 70px;
}
div.b-container div.b {
width: 70%;
height: 100%;
background-color: gray;
margin: auto;
margin-bottom: 2em;
}
div.c {
height: 5%;
background-color: aqua;
}
<!-- HTML -->
<div class="container">
<div class="a">
a
</div>
<div class="b-container">
<div class="b">b
</div>
</div>
<div class="c">
c
</div>
</div>
Make your other two divs as fixed too, keeping the margin-top: 2em parameter
when you set it to fixed it takes it out of the normal document flow. thats why the other elemts are getting lost under it. add a top: 0; to div a and change the margin-top for div b worked for me. its atleast a starting point. im not sure what the end result your looking for. check out the link
http://jsfiddle.net/8ar3kvep/
<body style="margin: 0; padding: 0;">
<div style="width:100%; background-color:Lime;">
<div style="width:100%; height:10%; background-color:Blue; position: fixed; top:0;">
a
</div>
<div style="width:70%; height:100%; background-color:Gray; margin: auto; margin-top:
4em;
margin-bottom: 2em;">
b
</div>
<div style="width:100%; height:5%; background-color:Aqua;">
c
</div>
</div>
</body>