I have an image of a web-browser that I am trying to position a text url over using position:absolute. The problem is that when I adjust the width of the page the text doesn't move the image in the fluid layout.
Device screen with text url example (what i'm trying to achieve): http://matthewhartman.github.io/base/
My code: http://jsfiddle.net/VwkwT/1/
HTML:
<div id="primaryContainer" class="primaryContainer clearfix">
<header id="Header">
<img id="Logo" src="img/logo.png" class="image" />
</header>
<section id="HeroDiv" class="centre">
<img id="Hero" src="img/browser.png" class="image" />
<div id="url">www.website.com</div>
</section>
<div id="box1" class="clearfix">
</div>
<div id="box2" class="clearfix">
</div>
<div id="box3" class="clearfix">
</div>
<div id="box4" class="clearfix">
</div>
</div>
CSS:
* {
margin:0px;
padding:0;
}
.primaryContainer {
height: auto;
margin-left: auto;
margin-right: auto;
min-height: 100%;
width: 100%;
background-color: rgb(252, 252, 252);
}
#box1 {
float: left;
height: 1190.75px;
margin-left: 0px;
margin-top: 153px;
clear: both;
width: 100%;
background-color: rgb(244, 244, 244);
}
#box2 {
float: left;
height: 759.40625px;
margin-left: 0%;
margin-top: -90.5px;
clear: none;
width: 100%;
margin-right: 0%;
background-color: rgb(242, 242, 242);
}
#Logo {
float: left;
width: 190px;
height: auto;
margin-left: 13.893926%;
margin-top: 41.75px;
margin-bottom: 45.75px;
clear: none;
}
#box3 {
float: left;
height: 733.828125px;
margin-left: -100%;
margin-top: 668.90625px;
clear: none;
width: 100%;
margin-right: 0%;
background-color: rgb(184, 218, 242);
}
#box4 {
float: left;
height: 733.828125px;
margin-left: 0%;
margin-top: 0px;
clear: both;
width: 100%;
margin-right: 0%;
background-color: rgb(244, 244, 244);
}
#HeroDiv {
position:relative;
height: 392px;
}
#url {
position:absolute;
font-size:11px;
color:#8B8B8B;
font-family: 'Candara', Calibri, Segoe, Segoe UI, Optima, Arial, sans-serif;
}
#Hero {
position:relative;
width: 809px;
height: auto;
display: block;
margin-left: auto;
margin-right: auto;
clear: both;
}
Any help is appreciated!
Related
I would like to know how to build this example for all resolutions ( from 27 to iPhone ), I would like to put my text just above my bottom image ->
.content {
display: inline-block;
width: 100%;
max-width: 800px;
margin: 0px auto 75px
}
.imgstyle {
float: left;
max-width: 800px;
width: 100%;
}
.textcontent {
text-align: left;
display: inline-block;
margin: 0 auto;
max-width: 300px;
position: absolute;
left: 0px;
right: 0px;
z-index: 1000;
width: 100%;
}
.hr {
height: 1px;
width: 50px;
background: #282828;
}
.textstyle1 {
font-family: 'GFS Didot', serif;
font-weight: 300;
text-align: left;
margin-top: 30px;
font-size: 40px;
}
.textstyle2 {
text-align: left;
line-height: 21px;
margin-top: 20px;
}
.textstyle3 {
text-align: left;
line-height: 21px;
font-weight: 700
}
<div class="content">
<img class="imgstyle" src="http://www.facticemagazine.com/newsletter/img/test/1.jpg" />
<div class="textcontent">
<div class="hr"></div>
<h1 class="textstyle1">Keep them<br/>closed</h1>
<p style="textstyle2">Helen Molsted by Arron Dunworth
<br/>Exclusive / November 11, 2016</p>
<p class="textstyle3">Read more ></p>
</div>
</div>
you have to remove the left: 0 and add right: 0.
Updated Fiddle
Try it:-
.textstyle1{
margin:0px auto;
float:right;
}
<h1 class="textstyle1">Keep them<br/>closed</h1>
or
.textstyle1{
margin:0px auto;
float:right;
}
P{
text-align:right;
margin:60px auto;
}
<h1 class="textstyle1">Keep them<br/>closed</h1><br>
<p>Helen Molsted by Arron Dunworth
<br/>Exclusive / November 11, 2016</p>
<p>Read more</p>
I have a navbar with a few elements inside it and a button that escapes the navbar when i resize it. What CSS property should I style to keep the button in CSS to stop the button from escaping the navbar?
Attached is a JFiddle of an example of what happens:
https://jsfiddle.net/6Lx0hkfa/
.green-button {
font-size: 13px;
display: inline-block;
height: 50px;
width: 170px;
float: left;
margin-left: 235px;
padding: 6px 10px;
background-color: rgb(185, 233, 137);
color: rgb(43, 150, 190);
text-transform: uppercase;
border-radius: 0px;
border-width: 0px;
border-style: initial;
border-color: initial;
box-sizing: border-box;
}
<section id="header">
<div class="wrapper">
<div class="address">7542 Fay Ave Upstairs Suite, La Jolla, CA 92037</div>
<div class="phone">(858) 381-0740</div>
<div class="email">sdacneclinic#gmail.com</div>
<div class="social">
<a class="social-btn fb" href="http://facebook.com"></a>
</div>
<div class="social">
<a class="social-btn tw" href="http://twitter.com"></a>
</div>
<div class="social">
<a class="social-btn ig" href="http://instagram.com"></a>
</div>
<div class="social">
<a class="social-btn gp" href="https://plus.google.com"></a>
</div>
<a href="/contacts">
<button class="green-button">Book Consultation</button>
</a>
</div>
</section>
I don't know what you are trying to achieve, but this one worked for me:
.green-button {
position: absolute;
}
This is a case where I would use float for simplicity. Note that this requires to put the link element on top of the rest of the wrapper's contents within the markup, but it's the most direct solution.
.green-button-link {
float: left;
}
.green-button {
font-size: 13px;
display: inline-block;
height: 50px;
width: 170px;
margin-right: 20px;
padding: 6px 10px;
background-color: rgb(185, 233, 137);
color: rgb(43, 150, 190);
text-transform: uppercase;
border-radius: 0px;
border-width: 0px;
border-style: initial;
border-color: initial;
box-sizing: border-box;
}
<section id="header">
<div class="wrapper">
<a class="green-button-link" href="/contacts">
<button class="green-button">Book Consultation</button>
</a>
<div class="address">7542 Fay Ave Upstairs Suite, La Jolla, CA 92037</div>
<div class="phone">(858) 381-0740</div>
<div class="email">sdacneclinic#gmail.com</div>
<div class="social">
<a class="social-btn fb" href="http://facebook.com"></a>
</div>
<div class="social">
<a class="social-btn tw" href="http://twitter.com"></a>
</div>
<div class="social">
<a class="social-btn ig" href="http://instagram.com"></a>
</div>
<div class="social">
<a class="social-btn gp" href="https://plus.google.com"></a>
</div>
</div>
</section>
check the snippet if its what you want.i added description add to ones I added to your code.
* {
margin: 0;
padding: 0;
}
body {
background: url(img/hero_bg.jpg) repeat-y center center fixed;
background size: 100%;
}
#header {
background-color: #1d7cb6;
display: block;
/* position: relative; */
color: white;
width: 100%;
height: 50px;
}
.wrapper {
text-align: center;
margin: 0px auto;
font-family: 'Raleway';
background: white;
z-index: 500;
vertical-align: middle;/* add */
position: relative;/* add */
padding-right: 200px;
}
.address {
display: inline-block;
width: 240px;
float: left;
display: inline-block;
height: 100%;
font-size: 10px;
padding: 20px 18px;
}
.phone {
display: inline-block;
width: 100px;
float: left;
height: 100%;
font-size: 10px;
padding: 20px 18px;
}
.email {
width: 150px;
float: left;
display: inline-block;
height: 100%;
padding: 20px 18px;
font-size: 10px;
}
a.social-btn {
width: 20px;
height: 20px;
margin-top: 13px;
float: left;
}
a.social-btn.fb {
background: url("img/facebook#2x.png") 0% 0%/ 20px 20px no-repeat;
display: inline-block;
}
a.social-btn.tw {
background: url("img/twitter#2x.png") 0% 0% / 20px 20px no-repeat;
display: inline-block;
}
a.social-btn.ig {
background: url("img/instagram#2x.png") 0% 0% / 20px 20px no-repeat;
}
a.social-btn.gp {
background: url("img/google#2x.png") 0% 0% / 20px 20px no-repeat;
}
section {
width: 900px;
margin: 0 auto;
}
section#header .wrapper button.green-button {
text-decoration: none;
font-family: 'Raleway';
}
.green-button {
font-size: 13px;
display: inline-block;
height: 50px;
width: 170px;
/* float: left; */
right: 0;/* add */
position: absolute;/* add */
/* margin-left: 235px; */
padding: 6px 10px;
background-color: rgb(185, 233, 137);
color: rgb(43, 150, 190);
text-transform: uppercase;
border-radius: 0px;
border-width: 0px;
border-style: initial;
border-color: initial;
box-sizing: border-box;
}
<section id="header">
<div class="wrapper">
<div class="address">7542 Fay Ave Upstairs Suite, La Jolla, CA 92037</div>
<div class="phone">(858) 381-0740</div>
<div class="email">sdacneclinic#gmail.com</div>
<div class="social"><a class="social-btn fb" href="http://facebook.com"></a></div>
<div class="social"><a class="social-btn tw" href="http://twitter.com"></a></div>
<div class="social"><a class="social-btn ig" href="http://instagram.com"></a></div>
<div class="social"><a class="social-btn gp" href="https://plus.google.com"></a></div>
<button class="green-button">Book Consultation</button>
</div>
</section>
<html>
<style>
#wrapper{
width: 960px;
margin: 0;
border:dashed yellow;
background-color: orange;
}
header{
float: left;
width: 960px;
border: dotted blue;
}
nav{
float: left;
width: 960px;
border: thin double pink;
}
article{
float: left;
width: 730px;
margin-left: 115px;
margin-right: 115px;
border: groove black;
background-color: white;
}
#sec1{
float: left;
width: 270px;
height: 500px;
margin-left: 45px;
margin-right: 45px;
margin-top: 50px;
background-color: turquoise;
border-radius: 10px;
}
#h1sec1{
float: left;
width: 100%;
text-align: center;
}
#psec1{
float: left;
width: 100%;
}
#sec2{
float: left;
width: 270px;
height: 500px;
margin-left: 45px;
margin-right: 45px;
margin-top: 50px;
background-color: turquoise;
border-radius: 10px;
}
#h1sec2{
float: left;
width: 100%;
text-align: center;
}
#psec2{
float: left;
width: 100%;
}
</style>
<head>
<meta charset="UTF-8">
<title>Untitled Document</title>
</head>
<body>
<div id="wrapper">
<header></header>
<nav></nav>
<article>
<section id="sec1">
<h1 id="h1sec1">Section 1</h1>
<p id="psec1"></p>
</section>
<section id="sec2">
<h1 id="h1sec2">Section 2</h1>
<p id="psec2"></p>
</section>
<section id="sec1">
<h1 id="h1sec1">Section 1</h1>
<p id="psec1"></p>
</section>
<section id="sec2">
<h1 id="h1sec2">Section 2</h1>
<p id="psec2"></p>
</section>
</article>
</div>
</body>
</html>
Wrapper will not surround article tag and contents. I'm not sure if this is just a simple math error on my part, or if the I need to adjust the margins and float it. Either way, please help me out here.
Changes done in the code:
Removed all float:left from the style.As it bring the child element out of its parent
Gave display:inline-block for all sections so that they can come in one row if width is available by behaving as an inline element.
removed the ids sec1,h1sec1,psec1,sec2,h1sec2 & psec2 and added classes sec,h1sec & psec as they were having common styles and we should always use unique id for each element.
#wrapper {
width: 960px;
margin: 0;
border: dashed yellow;
background-color: orange;
}
header {
width: 960px;
border: dotted blue;
}
nav {
width: 960px;
border: thin double pink;
}
article {
width: 730px;
margin-left: 115px;
margin-right: 115px;
border: groove black;
background-color: white;
}
.sec {
display: inline-block;
width: 270px;
height: 500px;
margin-left: 45px;
margin-right: 45px;
margin-top: 50px;
background-color: turquoise;
border-radius: 10px;
}
.h1sec {
width: 100%;
text-align: center;
}
.psec {
width: 100%;
}
<html>
<style>
</style>
<head>
<meta charset="UTF-8">
<title>Untitled Document</title>
</head>
<body>
<div id="wrapper">
<header></header>
<nav></nav>
<article>
<section class="sec">
<h1 class="h1sec">Section 1</h1>
<p class="psec"></p>
</section>
<section class="sec">
<h1 class="h1sec">Section 2</h1>
<p class="psec"></p>
</section>
<section class="sec">
<h1 class="h1sec">Section 1</h1>
<p class="psec"></p>
</section>
<section class="sec">
<h1 class="h1sec">Section 2</h1>
<p class="psec"></p>
</section>
</article>
</div>
</body>
</html>
You just need a method of "clearing the floats"...a so-called "ClearFix"
There are number of methods discussed here.
#wrapper {
width: 960px;
margin: 0;
border: dashed yellow;
background-color: orange;
overflow:auto;
}
#wrapper {
width: 960px;
margin: 0;
border: dashed yellow;
background-color: orange;
overflow:auto;
}
header {
float: left;
width: 960px;
border: dotted blue;
}
nav {
float: left;
width: 960px;
border: thin double pink;
}
article {
float: left;
width: 730px;
margin-left: 115px;
margin-right: 115px;
border: groove black;
background-color: white;
}
#sec1 {
float: left;
width: 270px;
height: 500px;
margin-left: 45px;
margin-right: 45px;
margin-top: 50px;
background-color: turquoise;
border-radius: 10px;
}
#h1sec1 {
float: left;
width: 100%;
text-align: center;
}
#psec1 {
float: left;
width: 100%;
}
#sec2 {
float: left;
width: 270px;
height: 500px;
margin-left: 45px;
margin-right: 45px;
margin-top: 50px;
background-color: turquoise;
border-radius: 10px;
}
#h1sec2 {
float: left;
width: 100%;
text-align: center;
}
#psec2 {
float: left;
width: 100%;
}
<div id="wrapper">
<header></header>
<nav></nav>
<article>
<section id="sec1">
<h1 id="h1sec1">Section 1</h1>
<p id="psec1"></p>
</section>
<section id="sec2">
<h1 id="h1sec2">Section 2</h1>
<p id="psec2"></p>
</section>
<section id="sec1">
<h1 id="h1sec1">Section 1</h1>
<p id="psec1"></p>
</section>
<section id="sec2">
<h1 id="h1sec2">Section 2</h1>
<p id="psec2"></p>
</section>
</article>
</div>
I am new to this, so I have this problem where the contents in the page will be shifted when the browser is minimized. When the browser is minimized, the contents including the logo will be shifted and the contents will be shifted out of the blue transparent background.
here is my css codes
#full-screen-background-image {
z-index: -999;
min-height: 100%;
min-width: 1300px;
width: 100%;
height: auto;
position: absolute;
top: 0;
left: 0;
}
.whole{
margin: 0px auto;
height: 1242px;
width: 1000px;
}
.clear{
margin: 0 auto;
clear: both;
}
.logo {
width: 460px;
height: 170px;
margin: 0 auto;
}
.fax {
margin: 0 auto;
width: 480px;
height: 110px;
margin-right: 267px;
}
.fax p {
color: white;
font-family: 'Istok Web', sans-serif;
font-size: 35px;
text-align:center;
float:left;
margin: 0 auto;
margin-top: 55px;
width: 394px;
}
.faxLogo{
float: left;
height:60px;
width: 60px;
margin: 0 auto;
margin-top: 40px;
margin-left: -385px;
}
.tel{
margin: 0 auto;
width: 480px;
height: 70px;
margin-right: 267px;
}
.telDetails{
float:left;
height: 10px;
}
.telLogo{
float: left;
height:60px;
width: 60px;
margin: 0 auto;
margin-top: -10px;
margin-left: 65px;
}
.tel p {
color: white;
font-family: 'Istok Web', sans-serif;
font-size: 35px;
text-align: center;
margin:0 auto;
margin-top: 10px;
margin-left: 10px;
}
.locationLogo{
float: left;
height: 60px;
width: 60px;
margin: 0 auto;
margin-left: 65px;
}
.location{
margin: 0 auto;
width: 500px;
}
.location p {
color: white;
font-family: 'Istok Web', sans-serif;
font-size: 35px;
float: left;
margin:0 auto;
margin-top: -35px;
margin-left: 160px;
line-height: 60px;
}
.detail1 {
margin: 0 auto;
text-align:center;
}
.detail1 p{
font-size: 45px;
font-family: 'Istok Web', sans-serif;
color:white;
text-align:center;
margin-left: 130px;
}
.detail2 {
font-size: 45px;
font-family: 'Istok Web', sans-serif;
color: white;
margin: 0 auto;
}
.detail2 p{
margin-top: -20px;
text-align:center;
margin-left: 45px;
}
here is my HTML codes
<div class="clear" style="height: 445px;"></div>
<div class="whole">
<div class="logo"><img src="images/logo_3.jpg" /></div>
<div class="clear" style="height:50px;"></div>
<div class="detail1">
<p>TEXT</p>
</div>
<div class="detail2">
<p>TEXT</p>
</div>
<div class="clear" style="margin-top:-53px;"></div>
<div class="location">
<div class="locationLogo">
<img src="images/location.png" />
</div>
<div class="locationDetails">
<p style="width: 500px;">TEXT<br />TEXT<br />TEXT</p>
</div>
</div>
<div class="tel">
<div class="telLogo" style="width: 10px;">
<img src="images/tel.png" />
</div>
<div class="telDetails">
<p style="width: 365px;">TEXT</p>
</div>
</div>
<div class="fax">
<div class="faxLogo" style="width: 10px;">
<img src="images/fax.png" />
</div>
<div class="faxDetails">
<p style="width: 394px;">TEXT</p>
</div>
</div>
</div>
Your content inside your transparent box moves when the window resizes but your transparent box is part of the background image. Use the oil rig as a background image and put your content in a div. Something like this:
.box {
width: 100%;
height: auto;
background-color: rgba(0,0,255,0.5);
}
<div class="box">
<ul>
<li>SOME CONTENT HERE</li>
<li>SOME CONTENT HERE</li>
<li>SOME CONTENT HERE</li>
<li>SOME CONTENT HERE</li>
</ul>
</div>
You can now place the div wherever you see fit on your page.
I have an image in my footer linked to my blog. This link is overflowing to the copyright and I have no idea why.
I never added a link to the copyright itself only to the image but for some reason when I hover over the copyright it links to the blog. I can't explain it this has never happened to me before.
Any help would be appreciated.
HTML
<footer>
<div class="footer">
<div class="left">
<img src="#" alt="">
<h6>Title</h6>
<p></p>
</div>
<div class="middle">
<p><a href="#"><img src="#" alt=""></p>
</div>
<div class="right">
<p><a href="#"><img src="#" alt=""></p>
</div>
</div>
</footer>
CSS
footer {
width: 100%;
background-color: #212119;
}
.footer {
margin: 0 auto;
width: 960px;
height: 350px;
margin-bottom: 10px;
color: #474741;
}
.footer .left {
margin-top: 20px;
margin-left: 10px;
float: left;
width: 33%;
text-align: left;
}
.footer .left img {
margin-top: 40px;
margin-left: 10px;
margin-right: 10px;
margin-bottom: 10px;
float: left;
height: 110px;
width: 113px;
}
.footer .left h6 {
color: #474741;
margin-top: 10px;
margin-bottom: 10px;
font-size: 18px;
font-weight: bold;
font-family: arial, sans-serif;
}
.footer .left p {
margin-top: 40px;
font-size: 14px;
}
.footer .left p:last-child {
margin-top: -15px;
font-family: arial, sans-serif;
}
.footer .middle {
text-align: center;
margin-top: 40px;
float: left;
width: 33%;
}
.footer .middle p {
margin-top: 0px;
}
.footer .right {
text-align: center;
float: right;
width: 33%;
}
.footer .right p {
margin-top: -152px;
}
.copyright {
clear: both;
}
.copyright p{
margin: 0 auto;
width: 960px;
color: #e8ad4f;
font-size: 20px;
margin-bottom: 10px;
vertical-align: top;
}
You need to close your a tags...
<p><a href="#"><img src="#" alt=""></p>
... becomes ...
<p><img src="#" alt=""></p>
Otherwise everything that follows will be enclosed in the link.