I would like to make my tag is big as the parent div (#logo, and i'm having trouble making a 100% padding without making it bigger than the parent's tag.
HTML
<div id="header">
<div id="logo">
</div>
<div class="hide" id="navigation">
<ul>
<li>About</li>
<li>Examples</li>
<li>Form</li>
<li>Contact</li>
</ul>
</div>
</div>
CSS
div#logo {
background: url(https://i.imgur.com/sHTtXk4.png) no-repeat center center;
background-size: cover;
float: left;
line-height: 80px;
width: 10%;
height: 80px;
text-align: center;
}
div#logo a {
background: #fff;
width: 100%;
height: 100%;
padding: 100%;
https://jsfiddle.net/vwbo9exg/
Remove padding and add display for a tag
div#logo a {
background: #fff;
width: 100%;
height: 100%;
/* padding: 100%; */
display: inline-block; /*Add this*/
}
Related
In normal (not responsive yet) my website running good, but after I set responsive to (width: 1336px) for my web it's display screen like this although I've set width for this is 100%
/* Here is my CSS *style.css* */
* {
box-sizing: border-box;
}
body {
font-family: 'Montserrat', sans-serif;
margin: 0;
width: 100%;
}
/* style for header section */
h1 {
line-height: 65px;
font-size: 48px;
}
.header-container {
background-image: linear-gradient( 0deg, rgba(35, 39, 49, -0.18), rgba(35, 39, 49, 1.82)), url("images/bg-image.jpeg");
background-repeat: no-repeat;
background-size: cover;
box-sizing: border-box;
position: absolute;
width: 100%;
height: 743px;
left: -1px;
top: 0px;
}
.nav-bar {
position: absolute;
width: 1700px;
height: 135px;
left: 69px;
top: 17px;
filter: brightness(100%);
}
.header-logo {
float: left;
}
.nav-content {
list-style-type: none;
}
.menu-section {
width: 50%;
float: right;
margin-top: 34px;
}
.menu-item {
float: left;
display: block;
margin-right: 70px;
}
/* nav menu */
.nav-content li a {
text-decoration: none;
color: #fff;
font-size: 20px;
}
.nav-content li a:hover {
color: #00B9F7;
}
/* header title */
.header-title {
color: #fff;
text-align: center;
margin: auto;
width: 30%;
padding: 10px;
margin-top: 10%;
}
/* header video */
.header-video {
margin-left: 30%;
width: fit-content;
}
<!-- here is my HTML code *index.html* -->
<header class="header-container">
<div class="header-content">
<div class="nav-bar">
<div class="header-logo">
<a href="#">
<img id="image-logo-header" class="bottom img-logo" src="images/logo.png">
</a>
</div>
<div class="menu-section">
<div class="menu-btn-group">
<div class="menu-toggle"></div>
<div class="menu-close"></div>
</div>
<div class="navigation navbar-collapse ">
<nav role="navigation">
<ul class="nav-content">
<li class="menu-item"><a class="active-item" href="#">Home</a></li>
<li class="menu-item">Blog</li>
<li class="menu-item">About</li>
<li class="menu-item">Contact</li>
<li class="menu-item">Login</li>
<li class="menu-item">Sign up</li>
</ul>
</nav>
</div>
</div>
</div>
<div class="header-title">
<h1>SHARE YOUR HOLIDDAY DREAM</h1>
</div>
<div class="header-video">
<img class="video-img" src="images/video-img.png">
</div>
</div>
</header>
Can anyone help me, please? your answer is my happiness, thank you so much
This is happening because in your code you have set background width to 100% that is working fine but when you are using resposive design the background image not filling the screen.
Because the background image is filling the 100% width of your responsive container but the blank space that you are seeing in right side is because of nav-bar, you have set its width fixed to 1700px.
To resolve this make your nav-bar responsive so that it can also set its width according to container.
You can use
.nav-bar {
position: absolute;
width: 100%;
height: 135px;
left: 69px;
top: 17px;
filter: brightness(100%);
}
width: 100% make your nav-bar responsive too.
Can you try using img: { width: 100vw };?
In css, verify the margins and padding.
I will explain my problem.
For school I have to make a website, but it is not working how it should be.
I have a border made of divs around the screen, and the page in the middle. When I first open the page, everything is in place, but when I click on one of the nav items (#link) the page suddenly loses its margin top and left. So it goes outside of the borders. I pasted all the code in the snippet, as I believe it will be too much for a post.
To see the full page and problem, please copy the code in a file to open it in the browser itself. I used vw and vh because it want it to be the same on different screens. I will do the inside elements mostly with percentages
So my questions:
How do I prevent this from happening, and an example?
Is there a way to set #Home as the usual landing space? without adding #Home in the link (and without changing its position)?
And my last question regarding CSS animation, how do I add a transition so it looks like the page is scrolling to the #div.
body{
top: 0;
margin: 0;
padding: 0;
left: 0;
}
.wrapper{
width: 100vw;
height: 100vh;
overflow: hidden;
}
.container{
width: 300vw;
height: 200vh;
background-image: url("../img/background.png");
background-size: cover;
}
/* simple nav*/
ul{
display: inline;
z-index: 99;
position: fixed;
}
ul li{
list-style-type: none;
display: inline;
}
ul li a{
text-decoration: none;
}
/*pages*/
.page{
margin: 10vh 10vw;
width: 80vw;
height: 80vh;
transition: 2s;
}
#Interactive{
background: blue;
float: left;
}
#Graphical{
float: left;
}
#Company{
float: left;
}
#Conclusion{
float: left;
}
#Home{
float: left;
}
/*header borders*/
.borders{
position: fixed;
z-index: 30;
}
.border-top{
height: 10vh;
width: 100vw;
top:0;
background: #007CFF;
}
.border-left{
height: 100vh;
width: 10vw;
top: 0;
background: #007CFF;
position: absolute;
}
.border-right{
height: 100vh;
width: 10vw;
top: 0;
background: #007CFF;
float: right;
margin-top: -10vh;
}
.border-bottom{
height: 10vh;
width: 100vw;
bottom: 0;
background: #007CFF;
position: absolute;
}
<div class="header">
<ul>
<li>Home</li>
<li>Interactive</li>
<li>Graphical</li>
<li>Company</li>
<li>Conclusion</li>
</ul>
</div>
<div class="borders">
<div class="border-top">
</div>
<div class="border-left">
</div>
<div class="border-right">
</div>
<div class="border-bottom">
</div>
</div>
<div class="wrapper">
<div class="container">
<div id="Interactive" class="page">
</div>
<div id="Graphical"class="page">
</div>
<div id="Company"class="page">
</div>
<div id="conclusion"class="page">
</div>
<div id="home"class="page">
</div>
</div>
</div>
Thanks for thinking with me, any help is appreciated.
I didn't really know how to call this post, so the search for it was difficult.
Please remove this div
#Interactive{
background: blue;
float: left;}
I think this only you are expecting.
I have made changes to your HTML code and CSS code on the basis of what i thought you wanted to achieve. Below is the code.
* {
padding: 0;
margin: 0;
}
body{
display: flex;
flex-direction: column;
}
.header {
padding: 10px 50px;
}
ul li{
list-style-type: none;
display: inline-block;
padding: 10px;
}
.wrapper {
flex-grow: 1;
padding: 50px 150px;
}
.page{
transition: 2s;
width: 100%;
height: 100%;
}
#Home{
background-color: pink;
}
#Interactive{
background: blue;
}
#Graphical{
background-color: green;
}
#Company{
background-color: yellow;
}
#Conclusion{
background-color: orange;
}
<div class="header">
<ul>
<li>Home</li>
<li>Interactive</li>
<li>Graphical</li>
<li>Company</li>
<li>Conclusion</li>
</ul>
</div>
<div class="wrapper">
<div id="Home" class="page">
</div>
<div id="Interactive" class="page">
</div>
<div id="Graphical" class="page">
</div>
<div id="Company" class="page">
</div>
<div id="Conclusion" class="page">
</div>
</div>
If you want to use transition for smooth scrolling. Refer to
this
article, you will have to use jQuery.
Also do not use fixed width or height until necessarily required.
Use document.getElementById('Home').focus() in document.ready() of js to bydefault show the Home Page.
Always focus on making responsive solutions with relative content rather than absolute content.
Let me know if you need more help :)
I have a simple layout and trying to keep the image within the div, but its going out of the div in full width mode, is there a way to resize image to keep within the div, I can handle is using background image but I think there must be a way to keep within the div using image tag
Here is the JSFiddle
header {
float: left;
width: 100%;
height: 100px;
background: #f00;
box-sizing: border-box;
padding: 10px 0;
}
header .header_left {
float: left;
width: 20%;
}
header .header_left > a > img {
width: 100%;
height: auto;
}
header .header_right {
float: right;
width: 20%;
}
<header>
<div class="mcontainer">
<div class="header_left"> <img src="https://cdn.img42.com/63de8c9048f1b98a226f926f5d9d56c5.jpeg" alt="Welcome"> </div>
<div class="header_right">
<ul>
<li>Test/Test</li>
<li>Login</li>
</ul>
</div>
</div>
</header>
Your header has a fixed height of 100px and a top and bottom padding of 10px. So your content has a height of 80px, so simply add max-height:80px; to your image:
The Code (https://jsfiddle.net/y1hnyc3d/1/):
header {
float: left;
width: 100%;
height: 100px;
background: #f00;
box-sizing: border-box;
padding: 10px 0;
}
header .header_left {
float: left;
width: 20%;
}
header .header_left > a > img {
width: 100%;
height: auto;
max-height:80px;
}
header .header_right {
float: right;
width: 20%;
}
<header>
<div class="mcontainer">
<div class="header_left"> <img src="https://cdn.img42.com/63de8c9048f1b98a226f926f5d9d56c5.jpeg" alt="Welcome"> </div>
<div class="header_right">
<ul>
<li>Test/Test</li>
<li>Login</li>
</ul>
</div>
</div>
</header>
I have a header in my web page where logo, application name, help link and logout are shown. Logo is placed left top, logout is placed right top, help is placed before logout link. The rest of the space should be occupied by the application name. I tried to float all the divs and then my divs lost width and when I try to set width on my app name div I get unexpected results when I try to set width: 100%. Even I dont set the width to 100% if the application name text increases I get unexpected results.
This is the code
<!DOCTYPE html>
<html>
<head>
<title>Mock UI</title>
<style>
body {
margin: 0px;
}
.oss-gradient {
height: 5px;
min-width: 1024px;
background: yellow;
}
.header {
height: 40px;
min-width: 1024px;
background: #def;
}
.logo {
background-image: url("logo_top_small.png");
background-repeat: no-repeat;
background-position: center center;
background-attachment: scroll;
width: 50px;
height: 100%;
float: left;
}
.product-name {
line-height: 35px;
height: 100%;
float: left;
width: 100%;
}
.help {
line-height: 35px;
float: right;
height: 100%;
}
.logout {
line-height: 35px;
float: right;
height: 100%;
}
.content-wrapper {
width: 1024px;
background: #defabc;
margin: 0px auto;
}
</style>
</head>
<body>
<div class="container">
<div class="oss-gradient">
</div>
<div class="header">
<div class="logo">
</div>
<div class="product-name">
App name
</div>
<div class="logout">
Logout
</div>
<div class="help">
Help
</div>
</div>
<div class="content-wrapper">
</div>
</div>
</body>
</html>
Here is a working sample.
I then tried doing the same with CSS3 calc method. But this involves hard coding the widths. A small change in logo's width or logout, help divs widths will create problems in the app name div.
Click here to see the working example with css3 calc
Then I tried to do it using float with inner divs. Below is my new code
<!DOCTYPE html>
<html>
<head>
<title>Mock UI</title>
<style>
body {
margin: 0px;
}
.oss-gradient {
height: 5px;
min-width: 1024px;
background: yellow;
}
.header {
height: 40px;
min-width: 1024px;
background: #def;
}
.logo {
background-image: url("logo_top_small.png");
background-repeat: no-repeat;
background-position: center center;
background-attachment: scroll;
width: 50px;
height: 100%;
float: left;
}
.wrapper {
height: 100%;
}
.product-name {
line-height: 35px;
height: 100%;
float: left;
}
.help {
line-height: 35px;
float: right;
height: 100%;
margin-right: 10px;
}
.logout {
line-height: 35px;
float: right;
height: 100%;
margin-right: 10px;
}
.oss-text {
line-height: 35px;
height: 100%;
overflow: hidden;
}
.content-wrapper {
width: 1024px;
background: #defabc;
margin: 0px auto;
}
</style>
</head>
<body>
<div class="container">
<div class="oss-gradient">
</div>
<div class="header">
<div class="logo">
</div>
<div class="wrapper">
<div class="logout">
Logout
</div>
<div class="wrapper">
<div class="help">
Help
</div>
<div class="oss-text">
App name
</div>
</div>
</div>
</div>
<div class="content-wrapper">
</div>
</div>
</body>
</html>
Click here to see the working example.
But this is creating lot of dom. Is there any other approach or the second solution is good enough?
The first solution is a total flop.
If I use CSS3 then I have to hardcode the widths
Solution 2 involves making the dom deeper.
I think there is another solution which involves using absolute positioning. But I dont know how to do it and is it a good approach or not.
You can achieve what you want using display:table and display:table-cell:
.header {display:table}
.header > div {display:table-cell}
As long as you give widths to logo, logout and help divs then the app name should stretch to take up the rest of the header
Example
Here's what you need with only 3 div containers
The markup:
<header>
<div class='logo'></div>
<div class='appName'><h3>Some App</h3></div>
<div class='btn-container'>
<button >Help</button>
<button>Logout</button>
</div>
</header>
and the CSS:
header {
position: fixed;
top: 0px;
width: 100%;
display: table;
}
header div {
display: table-cell;
vertical-align: middle;
}
.logo {
width:40px;
background: steelblue;
height: 40px;
float: left;
}
.btn-container {
width: 80px;
float: right;
}
.appName {
text-align: center;
width: 100%;
}
Try this:
.product-name {
line-height: 35px;
height: 100%;
text-align: center;
width: 100%;
}
This must be the most frequently occurring issue in my life!
I have to position a fixed DIV (800px) inside a 100% DIV and as always it works fine in everything but IE. I have tried the old "text-align" trick but nothing this time, I just can't get it to work.
If you want to inspect the actual page its www.chunkydesign.com and any answer would be greatly appreciated.
Here is the HTML (CSS Below)
<body>
<div id="navContainer">
<div id="navTopSpacer"></div>
<div id="navMain">
<div id="navContent">
<div id="navLogo"></div>
<div id="navLinks">
<h1>SERVICES ABOUT PORTFOLIO CONTACT</h1>
</div>
</div>
</div>
<div id="navBotSpacer"></div>
</div>
</body>
The devil code itself:
body {
padding: 0px;
margin: 0px;
}
navContainer{
width: 100%;
height: 110px;
}
navTopSpacer {
width: 100%;
height: 12px;
background-image: url('../images/core/nav_topspacer.jpg');
}
navMain {
width: 100%;
height: 88px;
background-image: url('../images/core/nav_main.jpg');
}
navContent {
text-align: center;
width: 800px;
height: 88px;
margin-left: auto;
margin-right: auto;
}
navLogo {
float: left;
width: 164px;
height: 88px;
background-image: url('../images/core/logo.png');
background-position: 0px 20px;
background-repeat: no-repeat;
}
navLinks {
float: right;
width: 400px;
height: 88px;
}
navLinks h1 {
font-family: Arial, Verdana, sans-serif;
text-align: right;
font-size: 13px;
color: #FE9900;
font-weight: 600;
padding-top: 40px;
word-spacing: 15px;
letter-spacing: 1px;
margin: 0px;
}
navBotSpacer {
width: 100%;
height: 10px;
background-image: url('../images/core/nav_botspacer.jpg');
}
By leaving a comment above your doctype you're making IE go into quirks mode, which makes rendering a nightmare.
Remove the comment and have NO text, spaces or anything above your doctype declaration.
Try using this markup:
<div id='header'>
<div class='center'>
<div id='logo'><h1><a href='' title=''></a></h1></div>
<ul id='navigation'>
<li>SERVICES</li>
<li>ABOUT</li>
<li>PORTFOLIO</li>
<li>CONTACT</li>
</ul>
</div>
</div>
And styling like this:
#header{
background:#cae1e9;
border-top:12px solid #7ebdce;
border-bottom:10px solid #a8d2de;
height:88px;
}
.center{
width:800px;
margin:auto;
}
Then just maybe float logo to the left and float navigation to the right or do whatever you want. But this kind of makup is much easier to understand and maybe see where is the error.
Combine that with the answer Paul gave you and i think that's it.