Im trying to make the height of the "mainbar" div stretch the entire page without there being a need for the vertical scrollbar while also making sure I can see the top of the div. when I remove the "margin-top" value from the "mainbar" css it removes the scrollbar but cuts off the top 50px. How would I move the div 50px lower (so I can see all of the content inside of it) without extending the page and adding the scrollbar back?
Here is the html:
<!DOCTYPE html>
<html>
<head>
<link href="style.css" type="text/css" rel="stylesheet">
</head>
<body>
<div class="navbar">
<ul>
<li class="nav">Home</li>
<li class="nav">About</li>
<li class="nav">Upload</li>
</ul>
</div>
<div class="mainbar">
<h1>hello</h1>
<h2>whats up</h2>
</div>
</body>
</html>
Here is the css
* {
box-sizing: border-box;
}
body {
background-color: #450068;
background-color: rgb(69, 0, 104);
margin: 0px;
padding: 0px;
}
h1, h2 {
text-align: center;
color: white;
}
li {
display: inline;
text-align: right;
list-style: none;
padding: 20px;
}
.navbar {
background-color: #8729a5;
border-bottom: .5px solid gray;
width: 100%;
height: 50px;
position: fixed;
top: 0;
padding: 0px;
border-bottom-left-radius: 15px;
border-bottom-right-radius: 15px;
}
.mainbar {
background-color: #8729a5;
background-color: black;
height: 100vh;
width: 1100px;
margin-left: auto;
margin-right: auto;
margin-top: 50px;
border: .5px solid gray;
border-radius: 15px;
overflow: scroll;
overflow-x: hidden;
}
* {
box-sizing: border-box;
}
body {
background-color: #450068;
background-color: rgb(69, 0, 104);
margin: 0px;
padding: 0px;
}
h1, h2 {
text-align: center;
color: white;
}
li {
display: inline;
text-align: right;
list-style: none;
padding: 20px;
}
.navbar {
background-color: #8729a5;
border-bottom: .5px solid gray;
width: 100%;
height: 45px;
position: fixed;
top: 0;
padding: 0px;
border-bottom-left-radius: 15px;
border-bottom-right-radius: 15px;
}
body > .mainbar {
background-color: #8729a5;
background-color: black;
height: 90vh;
width: 1100px;
margin-left: auto;
margin-right: auto;
margin-top: 50px;
border: .5px solid gray;
border-radius: 15px;
overflow: scroll;
overflow-x: hidden;
overflow-y: auto
}
new slimScroll(Element);
<!DOCTYPEhtml>
<head>
<link href="style.css" type="text/css" rel="stylesheet">
<script src="slimscroll.js"></script>
</head>
<body>
<div class="navbar">
<ul>
<li class="nav">Home</li>
<li class="nav">About</li>
<li class="nav">Upload</li>
</ul>
</div>
<div class="mainbar">
<h1>hello</h1>
<h2>whats up</h2>
<h2>whats up</h2>
</div>
</body>
Looked at : https://github.com/kamlekar/slim-scroll
and Hide scroll bar, but still being able to scroll
Not sure if that is what you wanted but the plugin removed the scrollbar on the right of the page >>
So the problem, it seems, is that you have a fixed height for navbar, and want mainbar to take the remainder of the screen.
With mainbar having a height of 100vh it will be as tall as the viewport; so anything you do to move it down 50px will cause the scrollbar to appear. This is the headache of mixing pixel sizes and relative (%, vh/vw) sizes.
If your target browser(s) support modern CSS, a flexbox is the solution to this problem.
If not, the "old way" is to use JavaScript to adjust the size of your mainbar div after the initial CSS-based layout is calculated; a pure CSS solution didn't exist before flexbox.
Try modifing your CSS maybe it will solve the problem.
margin-top to padding-top for the .mainbar.
* {
box-sizing: border-box;
}
body {
background-color: #450068;
background-color: rgb(69, 0, 104);
margin: 0px;
padding: 0px;
}
h1, h2 {
text-align: center;
color: white;
}
li {
display: inline;
text-align: right;
list-style: none;
padding: 20px;
}
.navbar {
background-color: #8729a5;
border-bottom: .5px solid gray;
width: 100%;
height: 50px;
position: fixed;
top: 0;
padding: 0px;
border-bottom-left-radius: 15px;
border-bottom-right-radius: 15px;
}
.mainbar {
background-color: #8729a5;
background-color: black;
height: 100vh;
width: 1100px;
margin-left: auto;
margin-right: auto;
padding-top: 50px; /* here */
border: .5px solid gray;
border-radius: 15px;
overflow: scroll;
overflow-x: hidden;
}
Related
I'm new to CSS and web development and trying to build my own and first website. I've read a few articles related to displaying and positioning elements however I still unable to get elements positioned perfectly while resizing the browser window!.
What I am trying to accomplish is in the codepen link in the first comment below
https://codepen.io/letsimoo/pen/XWNGoGa
HTML CODE
<head>
<meta name="viewport" content="width=device-width,initial-scale=1">
<meta charset="UTF-8">
</head>
<body class="mainBody">
<header class="mainHeader">
<div class="headerStuff">
<div class="social-list">
<div class="fb">
FB
</div>
<div class="twitter">
Twitter
</div>
<div class="instagram">
Instagram
</div>
</div>
<ul class="navigation">
<li> <b>My Projects</b> </li>
<li> <b>Gallery</b> </li>
<li> <b> About </b> </li>
<li> <b>Contact</b> </li>
</ul>
<div class="logoDiv">
<h2>Logo</h2>
</div>
</div>
<div class="HeaderLine"></div> <!-- Header Separator Line -->
</header>
</body>
CSS CODE
* {
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
-ms-box-sizing: border-box;
box-sizing: border-box;
}
.mainBody {
background-color: gray;
background-size: cover;
background-repeat: no-repeat;
color: white;
margin: 0px 0px 0px 20px;
/*width: 100%;*/
}
.mainHeader {
height: 80px;
}
.headerStuff {
height: auto;
display: flex;
position: relative;
align-items: bottom;
vertical-align: baseline;
width: 100%;
}
.social-list {
display: inline-flex;
position: absolute;
margin-top: 20px;
left: -10px;
}
.social-list div {
margin-left: 12px;
}
.navigation {
position: absolute;
right: 175px;
text-align: right;
height: 30px;
padding: 0px;
margin: 0px;
margin-top: 30px;
display: flex;
}
.navigation li {
background-color: #22385b;
display: inline-block;
margin-left: 5px;
padding: 7px 5px 7px 5px;
border-radius: 7px;
font-size: 20px;
width: 90px;
color: white;
}
.navigation li:hover {
background-color: #446291;
}
.navigation li a {
color: white;
font-size: 14px;
font-family: "Chakra Petch", sans-serif;
text-align: center;
text-decoration: none;
display: block;
}
ul li .prayer-window {
background-color: rgba(237, 239, 242, 0.9);
margin-top: 20px;
width: 400px;
height: 400px;
position: relative;
z-index: 1;
opacity: 0;
box-shadow: 0px 0px 100px black;
transition: 1s opacity, 5s width, 5s height;
}
.prayer-time:hover {
color: hotpink;
}
.prayer-time:active ~ .prayer-window {
opacity: 1;
}
.logoDiv {
position: absolute;
right: 0px;
}
.logoDiv img {
width: 150px;
}
.HeaderLine {
box-sizing: border-box;
height: 2px;
margin-top: 68px;
margin-right: 175px;
text-align: center;
background-color: pink;
box-shadow: 2px 2px 4px black, 0 0 30px red, 0 0 5px darkblue;
}
Please have a look to my code in the above link and try to resize the browser window to the minimum size
What the problem I'm facing?
Definitely you've notices how is the navigation elements jumped over the social media dev after resizing the browser window
So how can avoid this ugly act from the headerStuff div!??
Also please help me to improve my question if there are something wrong in my description or in the mentioned tags
Your .navigation .sosial-list are positioned absolute. That means they are out of the order of the other elements and does not take space by the other content.
As absolute positioned element .navigation is allways relative to the next parent element which is not positioned static. In your project it is .header-stuff. At the same time the margin-top moves it down from the top edge of header-stuff ...
So, if the screen becomes narrow your .header-stuff becomes narrow also. And your navigation keeps still in place: 175px from right edge of .header stuff and 30pxmargin from top ... that make it layered above your socials.
If you want to keep your structure enlarge the margin-top for .navigation so the navigation has still place enough to move below the social information.
But if you are open to change your sturcture you don't need an absolute positioning. Use a structure with block elements so socials and navigations are still beneath and don't layer over each other.
Just easy DEMO code structure example to explain the idea:
// css structure DEMO
nav {
display: block;
}
ul {
/* align ul to right */
margin-right: 0;
margin-left: auto;
}
li {
/* align li's into a line */
display: inline-block;
}
header hr {
... style your subheader line ...
}
// html structure DEMO
<header>
<div class="top-header>
... your socials ...
</div>
<nav>
<ul>
<li></li>
...
</ul>
</nav>
<hr>
</header>
Here's your updated updated CSS:
* {
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
-ms-box-sizing: border-box;
box-sizing: border-box;
}
.mainBody {
background-color: gray;
background-size: cover;
background-repeat: no-repeat;
color: white;
/* margin: 0px 0px 0px 20px; */
}
.headerStuff {
height: 80px;
display: flex;
position: relative;
vertical-align: baseline;
width: 100%;
justify-content: space-between;
align-items: center;
}
.social-list {
display: inline-flex;
}
.social-list div {
margin-left: 12px;
}
.navigation {
margin: 0;
}
.navigation li {
background-color: #22385b;
display: inline-block;
padding: 7px 5px 7px 5px;
border-radius: 7px;
font-size: 20px;
width: 90px;
color: white;
}
.navigation li:hover {
background-color: #446291;
}
.navigation li a {
color: white;
font-size: 14px;
font-family: 'Chakra Petch', sans-serif;
text-align: center;
text-decoration: none;
display: block;
}
ul li .prayer-window {
background-color: rgba(237, 239, 242, 0.9);
margin-top: 20px;
width: 400px;
height: 400px;
position: relative;
z-index: 1;
opacity: 0;
box-shadow: 0px 0px 100px black;
transition: 1s opacity, 5s width, 5s height;
}
.prayer-time:hover {
color: hotpink;
}
.prayer-time:active ~ .prayer-window {
opacity: 1;
}
.logoDiv h2 {
margin: 0;
}
.logoDiv img {
width: 150px;
}
.HeaderLine {
box-sizing: border-box;
height: 2px;
margin: 0 auto;
text-align: center;
background-color: pink;
box-shadow: 2px 2px 4px black, 0 0 30px red, 0 0 5px darkblue;
}
You can adjust css properties for specific screen sizes via media queries.
#media only screen and (max-width: 796px) {
//
}
PS. align-items:bottom is not really a thing. Probably you meant align-items:baseline
I want my text in the three link boxes to be vertically aligned in the middle - but they won't for some reason?
I also want the entire div each of the three sport options sit in, to be a clickable box. I have made "marathon" div clickable, but it messes up the alignment
What are these 2 problems ocurring?
*{
margin: 0;
padding: 0;
}/*
border: 0;
outline: 0;
font-size: 100%;
vertical-align: baseline;
background: transparent;
}*/
html,
body {
height:100%;
width: 100%;
}
.parent-container {
min-height:100%;
width: 100%;
position:relative;
background: black;
text-align: center;
margin: 0 auto;
}
.child-container{
margin: 0 auto;
width: 80%;
height: 60%;
display:flex;
justify-content: center;
left: 10%;
top: 20%;
background: black;
position: absolute;
flex-direction: column;
align-items: center;
border-radius: 0%;
border: 2px solid #39ff14 ;
font-family: 'Montserrat';
}
.Marathon {
top: 17.5%;
height: 10%;
width: 50%;
border: 2px solid #39ff14 ;
margin-top: auto;
}
.Marathon:hover{
background: grey;
}
.Hockey:hover{
background: grey;
}
.Cycling:hover{
background: grey;
}
.Hockey {
border: 2px solid #39ff14 ;
width: 50%;
height: 10%;
top: 45%;margin-top: auto;
}
.Cycling {
height: 10%;
width: 50%;
border: 2px solid #39ff14 ;
top: 72.5%;
margin-top:auto;
margin-bottom:auto;
}
h1{
color:#39ff14;
font-family: 'Nunito';
padding-top: 5%;
text-align: left;
margin-left: 10%;
}
a{
text-decoration: none;
}
.child-container a{
color: #39ff14;
text-decoration: none;
}
#container {
min-height:100%;
position:relative;
}
#header {
background:#ff0;
padding:10px;
}
#body {
padding:10px;
padding-bottom:60px; /* Height of the footer */
}
#footer {
position:absolute;
bottom:0;
width:100%;
height:60px; /* Height of the footer */
background:#6cf;
}
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="refresh" content="5">
<link type="text/css" rel="stylesheet" href="Styles.css" />
<link href="https://fonts.googleapis.com/css?family=Montserrat" rel="stylesheet" />
<link href="https://fonts.googleapis.com/css?family=Roboto" rel="stylesheet">
<link href="https://fonts.googleapis.com/css?family=Nunito" rel="stylesheet">
<title>My Map App</title>
</head>
<body>
<div class="parent-container">
<h1>My Map App</h1>
<div class="child-container">
<div class="Marathon">Marathon</div>
<div class="Hockey">Hockey</div>
<div class="Cycling">Cycling</div>
</div>
</div>
</body>
</html>
Also, I want my web app to show up nicely on my mobile. Currently, my web app shows nicely on my PC, but when I open on mobile, the title "My Map App" is tiny! How can I resolve this?
Thanks in advance
PS, very new to this!
You should remove all those individual styles for Hockey, Cycling, and Marathon. And add this to your .child-container style:
flex-direction: column;
align-items: center;
Though I wouldn't recommend something so general, a more global style for your links could look something like this:
.child-container > * {
padding: 12px 10%;
border: solid 2px #39ff14;
min-width: 150px;
margin-bottom: 20px;
}
Lastly, add this to the head of your document so mobile isn't so zoomed out:
<meta name="viewport" content="width=device-width, initial-scale=1">
Your Code has a minor syntax error. Make sure to keep track of tags. In this case, the div tag was accidentally placed after the anchor tag in the marathon section of the html. If you have a bug with an html element- go to that class to see why it is different from the others.
*{
margin: 0;
padding: 0;
}/*
border: 0;
outline: 0;
font-size: 100%;
vertical-align: baseline;
background: transparent;
}*/
html,
body {
height:100%;
width: 100%;
}
.parent-container {
min-height:100%;
width: 100%;
position:relative;
background: black;
text-align: center;
margin: 0 auto;
}
.child-container{
margin: 0 auto;
width: 80%;
height: 60%;
display:flex;
justify-content: center;
left: 10%;
top: 20%;
background: black;
position: absolute;
border-radius: 0%;
border: 2px solid #39ff14 ;
font-family: 'Montserrat';
}
.Marathon {
padding: 0;
position: absolute;
top: 17.5%;
height: 10%;
width: 50%;
border: 2px solid #39ff14 ;
color: #39ff14;
vertical-align: middle;
margin-top: auto;
border-radius: 0%;
}
.Marathon:hover{
background: grey;
}
.Hockey:hover{
background: grey;
}
.Cycling:hover{
background: grey;
}
.Hockey {
padding: 0;
position: absolute;
top: 45%;
height: 10%;
width: 50%;
border: 2px solid #39ff14 ;
color: #39ff14;
vertical-align: middle;
margin-top: auto;
border-radius: 0%;
}
.Cycling {
padding: 0;
position: absolute;
top: 72.5%;
height: 10%;
width: 50%;
border: 2px solid #39ff14 ;
color: #39ff14;
vertical-align: middle;
margin-top: auto;
border-radius: 0%;
}
.parent-container h1{
color:#39ff14;
font-family: 'Nunito';
padding-top: 5%;
text-align: left;
margin-left: 10%;
}
a{
text-decoration: none;
}
.child-container a{
color: #39ff14;
text-decoration: none;
}
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="refresh" content="5">
<link type="text/css" rel="stylesheet" href="Styles.css" />
<link href="https://fonts.googleapis.com/css?family=Montserrat" rel="stylesheet" />
<link href="https://fonts.googleapis.com/css?family=Roboto" rel="stylesheet">
<link href="https://fonts.googleapis.com/css?family=Nunito" rel="stylesheet">
<title>My Map App</title>
</head>
<body>
<div class="parent-container">
<h1>My Map App</h1>
<div class="child-container">
<div class="Marathon">Marathon</div>
<div class="Hockey">Hockey</div>
<div class="Cycling">Cycling</div>
</div>
</div>
</body>
</html>
You probably want to change the box styles so that they look nicer.
As for the mobile vs desktop problem look into this:
http://webdesignerwall.com/tutorials/responsive-design-in-3-steps
How about something super simple as this?
<a> //This will act as your button container
<p>Cycling</p> // Here goes the name
</a>
Give style of Button to your <a>, hence it will function as a button.
Keep CSS as simple as you could.
* {
background: black;
}
.parent-container {
margin: 40px;
}
.parent-container h1 {
font-size: 30px;
color: #39ff14;
}
.child-container {
display: flex;
flex-direction: column;
border: 2px solid #39ff14;
padding-top: 20px;
}
.child-container a {
flex: 1;
border: 2px solid #39ff14;
margin: 0px auto 20px auto;
width: 30%;
text-decoration: none;
}
.Marathon {
text-align: center;
color: #39ff14;
margin: 0;
height: 40px;
line-height: 40px;
}
.Hockey {
color: #39ff14;
text-align: center;
margin: 0;
height: 40px;
line-height: 40px;
}
.Cycling {
color: #39ff14;
text-align: center;
margin: 0;
height: 40px;
line-height: 40px;
}
<div class="parent-container">
<h1>My Map App</h1>
<div class="child-container">
<a href="marathon.php">
<p class="Marathon">Marathon</p>
</a>
<a href="hockey.php">
<p class="Hockey">Hockey</p>
</a>
<a href="cycling.php">
<p class="Cycling">Cycling</p>
</a>
</div>
</div>
I am trying to make shapes in the :before/ :after . this works fine in chrome but in Firefox. there is a small misalignment. and while printing that causes a small white space between the element and the :after selector.
This is how it looks in print preview with Firefox
HTML
<div class="container">
<div class="topbar">
<div class="text">Text</div>
</div>
</div>
My CSS
/* Styles go here */
.container .topbar {
height: 15px;
background-color: #91C34F !important;
width: 100%;
border-top-left-radius: 4px;
border-top-right-radius: 4px;
}
.container .topbar .text {
position: relative;
color: #fff !important;
float: right;
top: 3px;
background-color: #91C34F !important;
font-size: 16px;
padding: 8px 80px;
}
.container .topbar .text:after {
height: 0;
content: "";
display: block;
position: absolute;
top: -0.5px;
left: -37px;
border-right: 38px solid #91C34F !important;
border-bottom: 34px solid transparent;
}
This is a plunk for above code https://plnkr.co/edit/oll1ooap2mKC1EQo0n84?p=preview.
How to make that align properly in all browsers?
use equal value for left, border-right and border-bottom, also there is nothing like .5px.
use line-height to make text vertical align.
updated plunk
/* Styles go here */
.container .topbar {
height: 15px;
background-color: #91C34F !important;
width: 100%;
border-top-left-radius: 4px;
border-top-right-radius: 4px;
}
.container .topbar .text {
position: relative;
color: #fff !important;
float: right;
top: 3px;
background-color: #91C34F !important;
font-size: 16px;
padding: 0px 80px;
height:34px;
line-height:28px;
}
.container .topbar .text:after {
height: 0;
content: "";
display: block;
position: absolute;
top: 0px;
left: -34px;
border-right: 34px solid #91C34F !important;
border-bottom: 34px solid transparent;
}
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="style.css">
<script src="script.js"></script>
</head>
<body>
<div class="container">
<div class="topbar">
<div class="text">Text</div>
</div>
</div>
</body>
</html>
Take http://dowebsitesneedtolookexactlythesameineverybrowser.com/ to heart. Looking good is a sensible goal, looking the same isn't.
Understand the standards (we never know if the difference is because of a bug or because you've provided instructions that only make sense for a particular window size)
Use them (don't forget to validate the HTML and CSS and to lint the JS)
Ensure you engage standards mode
Learn about bugs in browsers
Though your code is right, it works perfectly on chrome.
Do check here,
https://jsfiddle.net/djmayank/q20e6u9m/
HTML:
<div class="container">
<div class="topbar">
<div class="text">Text</div>
</div>
</div>
CSS:
.container .topbar {
height: 15px;
background-color: #91C34F !important;
width: 100%;
border-top-left-radius: 4px;
border-top-right-radius: 4px;
}
.container .topbar .text {
position: relative;
color: #fff !important;
float: right;
top: 3px;
background-color: #91C34F !important;
font-size: 16px;
padding: 8px 80px;
}
.container .topbar .text:after {
height: 0;
content: "";
display: block;
position: absolute;
top: -0.5px;
left: -37px;
border-right: 38px solid #91C34F !important;
border-bottom: 34px solid transparent;
}
Hope it helped.
I have following html for my site:
Edit: https://jsfiddle.net/3v66fv3u/1/ for the static site
and my approach of making the site responsive: https://jsfiddle.net/wba321bm/
<!DOCTYPE html>
<html>
<head>
<link href="custom.css" rel="stylesheet">
</head>
<body>
<h1 class="title">Headline</h1>
<div class="wrapper">
<div class="left">
<div class="top">
<img id="img_1" src="img_1.png">
</div>
<div class="bottom">
<img id="img_3" src="img_3.png">
</div>
</div>
<div class="middle">
<div class="about-text">
<h3>small headline</h3>
<p>actually a lot of text</p>
</div>
</div>
<div class="right">
<div class="top">
<img id="img_2" src="img_2.png">
</div>
<div class="bottom">
<img id="img_4" src="img_4.png">
</div>
</div>
</div>
<img class="banner" src="banner.png"/>
</body>
</html>
And this is my current css file:
html {
font-family: "Verdana", Geneva, sans-serif;
color: white;
}
body {
margin: auto;
background-color: black;
width: 1150px;
}
hr {
border-top: 1px dotted black;
}
.title {
text-align: center;
padding-bottom: 20px;
}
.wrapper {
margin: auto;
}
.left {
float: left;
}
.middle {
height: 597px;
width: 550px;
float: left;
border-top: 1px solid white;
border-bottom: 1px solid white;
box-shadow: inset 0px 0px 20px 0px rgba(0,0,0,1);
margin-top: -4px;
}
.about-text {
margin-left: 25px;
margin-right: 25px;
}
.right {
float: left;
}
.gallery {
padding-top: 100px;
width: 100%;
text-align: center;
}
img {
height: 300px;
transition: 0.5s ease;
backface-visibility: hidden;
/* inline-block fügt standardmäßig 4px Padding hinzu
das muss nun wieder subtrahiert werden. */
margin-top: -4px;
}
img:hover {
opacity: 0.5;
}
#img_1 {
border-top-left-radius: 30px;
}
#img_2 {
border-top-right-radius: 30px;
}
#img_3 {
border-bottom-left-radius: 30px;
}
#img_4 {
border-bottom-right-radius: 30px;
}
/* 827 x 178 */
.banner {
width: 410px;
height: 90px;
position: absolute;
right: 0px;
bottom: 0px;
}
The website currently looks like this (with static layout):
Now I want to go away from the fixed layout and want to make the website responsive. However, when I give the fields a relative width the whole layout gets messed up...
This is the css I tried to use to achieve the responsive layout:
html, body {
font-family: "Verdana", Geneva, sans-serif;
color: white;
background-color: black;
height: 100%;
}
hr {
border-top: 1px dotted black;
}
.title {
text-align: center;
padding-bottom: 20px;
}
.wrapper {
border: 1px solid white;
margin: auto;
width: 80%;
}
.left {
float: left;
}
.middle {
width: 40%;
height: auto;
float: left;
border-top: 1px solid white;
border-bottom: 1px solid white;
box-shadow: inset 0px 0px 20px 0px rgba(0,0,0,1);
margin-top: -4px;
}
.about-text {
margin-left: 25px;
margin-right: 25px;
}
.right {
float: left;
}
.gallery {
padding-top: 100px;
width: 100%;
text-align: center;
}
img {
width: 40%;
height: auto;
transition: 0.5s ease;
backface-visibility: hidden;
/* inline-block fügt standardmäßig 4px Padding hinzu
das muss nun wieder subtrahiert werden. */
margin-top: -4px;
}
img:hover {
opacity: 0.5;
}
#img_1 {
border-top-left-radius: 30px;
}
#img_2 {
border-top-right-radius: 30px;
}
#img_3 {
border-bottom-left-radius: 30px;
}
#img_4 {
border-bottom-right-radius: 30px;
}
/* 827 x 178 */
.banner {
width: 20%;
height: 10%;
position: absolute;
right: 0px;
bottom: 0px;
}
It's a matter of WHICH elements get the percentage value. In my adaptation of your fiddle, I assigned width: 30% to .left and right (which are the containers for the images) and made the image width 100% to span the whole width of their containers.
See here: https://jsfiddle.net/35n4dxqn/1/
well, when you give a or a division relative attribute it will be placed relative or according to the previous div i.e. it will not be independent from other divisions.
the solution if you want to make it responsive one forward and efficient way is to use Grid System (Bootstrap class).
I'm trying to achieve the effect of having a centered image that flows past its containing div's borders, but without using position: absolute, because it hides the header buttons behind it. Is there any clean way to do this without just using old-school absolute position with all the elements (which would be a real pain if I try to do any kind of responsiveness at all)?
Relevant code:
.container {
max-width: 60rem;
margin: 0 auto;
padding: 3rem 1.5rem;
border-right: 1px solid black;
border-left: 1px solid black;
background-color: white;
}
.container.no-border {
border: none;
background-color: transparent;
position: relative;
}
#logo {
display: block;
position: absolute;
top: 0;
left: 50%;
width: 150px;
margin-left: -75px;
}
JSFiddle: http://jsfiddle.net/bH35r/
P.S. I'm willing to utilize pretty much anything as long as it does the job cleanly.
You can use display:inline-block;
FIDDLE
HTML :
<div class="section header">
<div class="container no-border">
<a class="header" href="#">About</a>
<a class="header" href="#">News</a>
<a class="header" href="#">Teams</a>
<div class="logo_wrap">
<img id="logo" src="http://equineclub.zachschristmaslist.info/images/pennant.png"/>
</div>
<a class="header" href="#">Apparel</a>
<a class="header" href="#">Sponsorship</a>
<a class="header" href="#">Contact</a>
</div>
</div>
CSS :
body {
margin: 0;
font-family: Helvetica;
font-size: 100%;
background-color: #191A18;
}
.section {
margin: 0;
padding: 0;
clear: both;
}
.section.header {
background-image: url('../images/background.png');
background-position: 50% 90%;
border-bottom: 1px solid #A8A8A8;
box-shadow: 0 1rem 1rem #000;
text-align: center;
}
.container {
max-width: 60rem;
margin: 0 auto;
padding: 0 1.5rem;
border-right: 1px solid black;
border-left: 1px solid black;
background-color: white;
}
.container.no-border {
border: none;
background-color: transparent;
position: relative;
}
.container.logo {
background-image: url('../images/main-image.jpg');
background-position: 50% 20%;
min-height: 20rem;
}
a.header {
color: white;
display:inline-block;
text-decoration: none;
padding: 3rem 1.5rem;
margin: 0 0.5rem;
background-color: rgba(255,255,255,0.1);
}
#logo {
width: 150px;
}
.logo_wrap{
display: inline-block;
height: 5.5rem;
vertical-align:top;
overflow:visible;
}
Use a CSS background image.
.container {
max-width: 60rem;
margin: 0 auto;
padding: 3rem 1.5rem;
border-right: 1px solid black;
border-left: 1px solid black;
background-color: white;
background-image:url(....);
background-repeat-no-repeat;
background-position: 0px 0px; <--- adjust accordingly.
}
In general, images that are part of the UI (not the content) should be CSS backgrounds, not inline images anyway.