In the middle of creating one of my first webpages for a college course and ran into a really weird problem. I've been commenting out code trying to find where the issue is but I have no idea what's wrong.
I used *{ border: 1px solid red; } to see all the CSS elements, and all I see that's related is a red line that outlines the entire page.
Any help? Here's my CSS.
h1 {
font-family: "Trebuchet MS", Helvetica, sans-serif;
color:white;
text-align:center;
font-size:55px;
}
.gradPic{
display: block;
margin-left: auto;
margin-right: auto;
}
.titleBox {
background-color:black;
top:0;
left:0;
height:150px;
width:1875px;
position:static;
border:5px outset white;
border-style:groove;
}
.bio {
height:600px;
width:400px;
font-size:105%;
font-family: "Trebuchet MS", Helvetica, sans-serif;
background-color:black;
border:5px outset white;
border-style:groove;
margin: 15px 0px 0px 0px;
}
.movies {
height:600px;
width:400px;
font-size:105%;
font-family: "Trebuchet MS", Helvetica, sans-serif;
background-color:black;
border:5px outset white;
border-style:groove;
margin: 15px 0px 0px 0px;
position:relative;
left:492px;
bottom:625px;
}
.books {
height:600px;
width:400px;
font-size:105%;
font-family: "Trebuchet MS", Helvetica, sans-serif;
background-color:black;
border:5px outset white;
border-style:groove;
margin: 15px 0px 0px 0px;
position:relative;
left:984px;
bottom:1250px;
}
.sites {
height:600px;
width:400px;
font-size:105%;
font-family: "Trebuchet MS", Helvetica, sans-serif;
background-color:black;
border:5px outset white;
border-style:groove;
margin: 15px 0px 0px 0px;
position:relative;
left:1476px;
bottom:1875px;
}
body {
background-image: url("gradient.jpg");
color:white
}
And the HTML
<!DOCTYPE HTML>
<html>
<head>
<link rel="stylesheet" href="StylesheetAssign2.css" type="text/css">
<title>Sujal's IT 130 Assignment 2 Page</title>
</head>
<body>
<div class="titleBox"><h1>Sujal Dantluri</h1> <!-- box at the top of the page !-->
</div>
<div class="bio"><h2 style=color:white;text-align:center>Personal Background</h2> <!-- personal info in unordered list !-->
<img src="graduation.jpg" alt="Image couldn't be loaded; try again" height="175" width="225" class="gradPic"> <!-- creates a class for the image so it can be centered !-->
<ul>
<li>18 years old</li><br>
<li>Majoring in Computer Science</li><br>
<li>Interested in Technology, Animals, and Cybersecurity</li><br>
<li>Hobbies include an unhealthy amount of gaming and napping</li><br>
<li>From Illinois</li><br>
<li>Fun Fact: I have a twin sister.</li><br>
</ul>
</div>
<div class="movies"><h2 style=color:white;text-align:center>Favorite Movies</h2>
</div>
<div class="books"><h2 style=color:white;text-align:center>Favorite Books</h2>
</div>
<div class="sites"><h2 style=color:white;text-align:center>Favorite Sites and Quotes</h2></div>
</body>
</html>
h1 {
font-family: "Trebuchet MS", Helvetica, sans-serif;
color:white;
text-align:center;
font-size:55px;
}
.gradPic{
display: block;
margin-left: auto;
margin-right: auto;
}
.titleBox {
background-color:black;
top:0;
left:0;
height:150px;
width:100%;
border:5px outset white;
border-style:groove;
}
.totaldiv{display:flex;width:100%;}
.bio {
display: inline-block;
height:600px;
width:25%;
font-size:15px;
font-family: "Trebuchet MS", Helvetica, sans-serif;
background-color:black;
border:5px outset white;
border-style:groove;
margin: 15px 0px 0px 0px;
}
.bio h2{margin: 0 0 10px;}
.movies {
display: inline-block;
height:600px;
width:25%;
font-size:15px;
font-family: "Trebuchet MS", Helvetica, sans-serif;
background-color:black;
border:5px outset white;
border-style:groove;
margin: 15px 0px 0px 0px;
left:492px;
bottom:625px;
}
.books {
display: inline-block;
height:600px;
width:25%;
font-size:15px;
font-family: "Trebuchet MS", Helvetica, sans-serif;
background-color:black;
border:5px outset white;
border-style:groove;
margin: 15px 0px 0px 0px;
left:984px;
bottom:1250px;
}
.sites {
display: inline-block;
height:600px;
width:25%;
font-size:15px;
font-family: "Trebuchet MS", Helvetica, sans-serif;
background-color:black;
border:5px outset white;
border-style:groove;
margin: 15px 0px 0px 0px;
left:1476px;
bottom:1875px;
}
body {
background-image: url("gradient.jpg");
color:white
}
<div class="titleBox"><h1>Sujal Dantluri</h1> <!-- box at the top of the page !-->
</div>
<div class="totaldiv">
<div class="bio"><h2 style=color:white;text-align:center>Personal Background</h2> <!-- personal info in unordered list !-->
<!--<img src="graduation.jpg" alt="Image couldn't be loaded; try again" height="175" width="225" class="gradPic">--> <!-- creates a class for the image so it can be centered !-->
<ul>
<li>18 years old</li><br>
<li>Majoring in Computer Science</li><br>
<li>Interested in Technology, Animals, and Cybersecurity</li><br>
<li>Hobbies include an unhealthy amount of gaming and napping</li><br>
<li>From Illinois</li><br>
<li>Fun Fact: I have a twin sister.</li><br>
</ul>
</div>
<div class="movies"><h2 style=color:white;text-align:center>Favorite Movies</h2>
</div>
<div class="books"><h2 style=color:white;text-align:center>Favorite Books</h2>
</div>
<div class="sites"><h2 style=color:white;text-align:center>Favorite Sites and Quotes</h2></div>
</div>
Your code is far from being useable for a real website (i.e. not repsponsive), but if you really want to fix such a width to the page, you should move the width setting from the header to the body, use display: inline-block; and vertical-align: top; on all those boxes that should be next to each other, and erase position: relative and all their top, bottom, leftand right` settings. That way also the whitespace at the bottom will be history...
You can create spaces between the boxes by using margin-left on them, but there are better solutions like using a (full-width) container and applying display: flex and justify-content: space-between to it.
h1 {
font-family: "Trebuchet MS", Helvetica, sans-serif;
color: white;
text-align: center;
font-size: 55px;
}
.gradPic {
display: block;
margin-left: auto;
margin-right: auto;
}
.titleBox {
background-color: black;
height: 150px;
position: static;
border: 5px outset white;
border-style: groove;
}
.bio {
height: 600px;
width: 400px;
font-size: 105%;
font-family: "Trebuchet MS", Helvetica, sans-serif;
background-color: black;
border: 5px outset white;
border-style: groove;
margin: 15px 0px 0px 0px;
display: inline-block;
vertical-align: top;
}
.movies {
height: 600px;
width: 400px;
font-size: 105%;
font-family: "Trebuchet MS", Helvetica, sans-serif;
background-color: black;
border: 5px outset white;
border-style: groove;
margin: 15px 0px 0px 0px;
display: inline-block;
vertical-align: top;
}
.books {
height: 600px;
width: 400px;
font-size: 105%;
font-family: "Trebuchet MS", Helvetica, sans-serif;
background-color: black;
border: 5px outset white;
border-style: groove;
margin: 15px 0px 0px 0px;
display: inline-block;
vertical-align: top;
}
.sites {
height: 600px;
width: 400px;
font-size: 105%;
font-family: "Trebuchet MS", Helvetica, sans-serif;
background-color: black;
border: 5px outset white;
border-style: groove;
margin: 15px 0px 0px 0px;
display: inline-block;
vertical-align: top;
}
body {
background-image: url("gradient.jpg");
color: white;
width: 1875px;
}
<div class="titleBox">
<h1>Sujal Dantluri</h1>
<!-- box at the top of the page !-->
</div>
<div class="bio">
<h2 style=color:white;text-align:center>Personal Background</h2>
<!-- personal info in unordered list !-->
<img src="graduation.jpg" alt="Image couldn't be loaded; try again" height="175" width="225" class="gradPic">
<!-- creates a class for the image so it can be centered !-->
<ul>
<li>18 years old</li><br>
<li>Majoring in Computer Science</li><br>
<li>Interested in Technology, Animals, and Cybersecurity</li><br>
<li>Hobbies include an unhealthy amount of gaming and napping</li><br>
<li>From Illinois</li><br>
<li>Fun Fact: I have a twin sister.</li><br>
</ul>
</div>
<div class="movies">
<h2 style=color:white;text-align:center>Favorite Movies</h2>
</div>
<div class="books">
<h2 style=color:white;text-align:center>Favorite Books</h2>
</div>
<div class="sites">
<h2 style=color:white;text-align:center>Favorite Sites and Quotes</h2>
</div>
Related
eBay listings have a description field with 5000 character limit. It allows some html tags and the style attribute, but a lot of functionality is disabled.
When I insert an image that is too wide, eBay adds horizontal scrolling, which is a terrible user experience. I want an image that automatically resizes to the available width without triggering horizontal scrolling.
It seems the most widely used, and officially recommended method of resizing to different screens, is changing the viewport using the meta tag as described here.
Unfortunately this also changes the text size, and doesn't give the option to only scale one image and not others. Is this the only method? Or is there another way?
Or am I just using the meta tag wrong? (I put <meta name="viewport" content="width=device-width, initial-scale=1"> on the first line and wrote the rest of the description under it.)
This is the old code I've used for a template in the past. Using containers and remotely hosted CSS I was able to constrain images to the container wrapped around the whole template.
Unfortunately, as you know, eBay is a bit rubbish when it comes to responsive CSS, so this doesn't work well when under 1400px (I think).
I think you may be able to add some responsive media queries in order to stack this properly. However, this was created before the days of good responsive design I'm afraid.
CSS
#charset "utf-8";
/* CSS Document */
body {
background:#ffffff;
/*background-image:url(http://www.unbmedia.co.uk/Clients/UNB09029/bg.jpg);*/
background-position:center;
background-repeat:repeat-y;
}
/* Constrain Page Size */
.pagewidth {
width:954px;
text-align: centre;
left: 0;
margin:auto;
}
.pageminwidth {
text-align: left;
left: 0;
}
/* Footer Links with Country Names */
#sFooter {
text-align:center;
font-size:10px;
}
/* Ebay Footer Links */
span.ebay{
text-align:center;
}
#title{
font:Arial, Helvetica, sans-serif;
font-family:Arial, Helvetica, sans-serif;
font-size:24px;
background:#548101;
color:#FFF;
padding:20px;
color:#777;
font-size:14px;
padding:3px;
font-family: serif;
letter-spacing: 0.5px;
font-weight: 100;
transition: all 0.3s;
}
#left-men-tit{
background: #18213E;
color:white;
font-size:14px;
padding:3px;
font-family: serif;
letter-spacing: 0.5px;
font-weight: 100;
transition: all 0.3s;
padding:10px;
}
#left-men{
font:Arial, Helvetica, sans-serif;
font-family:Arial, Helvetica, sans-serif;
color:#548101;
font-size:14px;
padding-left:12px;
padding-top:3px;
padding-bottom:3px;
}
#desc-title-list{
font:Arial, Helvetica, sans-serif;
font-family:Arial, Helvetica, sans-serif;
color:#548101;
font-size:12px;
}
#desc-desc-list{
font:Arial, Helvetica, sans-serif;
font-family:Arial, Helvetica, sans-serif; color:#000000;
font-size:12px;
}
#product-desc-title{
font:Arial, Helvetica, sans-serif;
font-family:Arial, Helvetica, sans-serif; color:#fff;
font-size:12px;
background-color:#548101;
padding:10px;
}
#product-desc{
font:Arial, Helvetica, sans-serif;
font-family:Arial, Helvetica, sans-serif;
color:#000000;
font-size:12px;
padding-left:5px;
}
td#product-desc{
border:thin;
border-color:#000;
}
table#desc{
font:Arial, Helvetica, sans-serif;
font-family:Arial, Helvetica, sans-serif;
vertical-align:text-top;
}
#Main{
font:Arial, Helvetica, sans-serif;
font-family:Arial, Helvetica, sans-serif;
vertical-align:top;
}
#main-holder{
font-size:0px;
}
/* Category Links */
a:link{
font:Arial, Helvetica, sans-serif;
font-family:Arial, Helvetica, sans-serif;
color:#777;
font-size:12px;
padding:3px;
text-decoration:none;
font-weight:bold;
}
a:visited{
font:Arial, Helvetica, sans-serif;
font-family:Arial, Helvetica, sans-serif;
color:#777;
font-size:12px;
padding:3px;
text-decoration:none;
font-weight:bold;
}
a:hover{
font:Arial, Helvetica, sans-serif;
font-family:Arial, Helvetica, sans-serif;
color: #18213E;
font-size:12px;
/*background:#024873;*/
text-decoration:none;
padding:3px;
font-weight:bold;
padding-left: 7px;
}
a:active{
font:Arial, Helvetica, sans-serif;
font-family:Arial, Helvetica, sans-serif;
color:#548101;
font-size:12px;
/*background:#024873;*/
text-decoration:none;
padding:3px;
font-weight:bold;
}
div#EBdescription{
font-size:0px;
}
/*** NEW LISTING TEMPLATE CSS ***/
.container{ width: 100%; max-width: 1100px; margin:auto;}
.ebayList-MainCol{float: right; width: 79%;}
.ebayList-LeftCol{float: right; width: 21%; margin-top: 162px;}
.ebayList-LeftCol h3{display: block; width: 87%; padding: 10px; margin: 0 0px 0 0; background: #18213E; color: white;
font-size: 16px; font-weight: 100; border: 1px solid black; width: 200px;}
.ebayList-LeftCol ul{ border: 1px solid #CCC; padding: 10px; margin: 0 10px 0 0; }
.ebayList-LeftCol li:before { content: ">"; padding-left: 5px; padding-right: 5px; margin-left: 0px; font-size: 14px;}
.ebayList-LeftCol li{ list-style: none; font-size: 14px; font-weight: 100; color:#777; padding: 10px 0;}
.ebayList-LeftCol li a:link{font-weight: 100; color:#777!important; font-family: serif; font-size: 14px; letter-spacing: 0.5px; transition: all 0.3s;}
.ebayList-LeftCol li a:hover{transition: all 0.3s;}
.ebayList-Header img{ width: 100%;}
.ebayList-ProductImage{width: 100%; text-align: center;}
.ebayList-ProductImage img{width: 100%; margin: auto; position: relative; text-align: center;}
.ebayList-ProductImage h1{ text-align: center; font-weight: 100; letter-spacing: 1px; font-size: 26px; color: #18213E; max-width: 900px; width: 100%; margin: 50px auto; }
.ebayList-Summary--Wrapper{float: left;}
.ebayList-Summary { width: 50%; float: left;}
.ebayList-Summary h2{ font-weight: 100; font-size: 16px; margin-top: 30px; border-bottom: 1px solid #ccc;padding-bottom: 10px;}
.ebayList-Summary p{ font-weight: 100; font-size: 14px; line-height: 22px;}
.ebayList-Spec { width: 48%; float: left; margin-bottom: 20px; margin-top: 0px; padding-left: 2%}
.ebayList-Spec h2{font-weight: 100; font-size: 16px; margin-top: 30px; border-bottom: 1px solid #ccc;padding-bottom: 10px;}
.ebayList-Spec dl{ width: 100%;}
.ebayList-Spec dt{ width: 30%; float: left; font-weight: bold; margin: 0; font-size: 14px; margin-bottom: 5px;}
.ebayList-Spec dd{ width: 70%; float: left; margin: 0; font-size: 14px; margin-bottom: 5px;}
.ebayList-Shipping-Returns { float: left; width: 50%; text-align: left; margin-bottom: 50px;}
.ebayList-Shipping-Returns img{width:98%;}
.ebayList-Shipping-Returns + .ebayList-Shipping-Returns{text-align: right;}
.ebayList-footer{float: left;}
.ebayList-footer img{ width: 100%;}
#media (max-width:1000px) {
.ebayList-LeftCol{ display: none; }
.ebayList-MainCol{ width: 100%; }
}
#media (max-width:700px) {
.ebayList-Spec{ width: 100%; padding-left: 0;}
.ebayList-Summary{ width: 100%; }
.ebayList-Shipping-Returns{ width: 100%; }
}
Listing Description:
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="https://remote.littens.co.uk/listing.css" type="text/css">
<div class="container">
<div class="ebayList-Header"><img src="https://remote.littens.co.uk/header.png" alt=""></div>
<div class="ebayList-MainCol">
<div class="ebayList-ProductImage">
<h1>CHILDREN'S CHARACTER DESIGN BEANBAG BEAN BAG SEAT FILLED JUNIOR KIDS TODDLER</h1>
<img src="https://i.ebayimg.com/00/s/OTIxWDEyMjg=/z/tagAAOSw-vlViACO/$_57.JPG?set_id=880000500F">
</div>
<div class="ebayList-Summary--Wrapper">
<div class="ebayList-Summary">
<h2>Product Summary</h2>
<p>These are official novelty character licensed beanbags. These are filled to a perfect volume of 3 cubic ft, giving it an ideal structure and cushioning for the children to sit and enjoy. These would make an ideal piece of soft furniture in
a child’s room. All our products are fully compliant to the UK Furniture and Furnishings Regulations.</p>
<p>Please select the design you require from the drop down menu at the top.</p>
</div>
<div class="ebayList-Spec">
<h2>Specification</h2>
<dl>
<dt>Product</dt>
<dd>Beanbag</dd>
<dt>Brand</dt>
<dd>Assort</dd>
<dt>Version</dt>
<dd>Kids</dd>
<dt>Colour</dt>
<dd>Assort</dd>
<dt>Size</dt>
<dd>3 Cubic Feet</dd>
<dt>Dimensions</dt>
<dd>50x50x50cm</dd>
<dt>Includes</dt>
<dd>Beanbag & Filling</dd>
<dt>Material</dt>
<dd>100% Cotton / Polystyrene Bead</dd>
<dt>Washable</dt>
<dd>Cover Machine Washable</dd>
<dt>Suitability</dt>
<dd>Over 3 Years Of Age</dd>
</dl>
</div>
</div>
<div class="ebayList-Shipping-Returns">
<img src="https://remote.littens.co.uk/postage-info.png" alt="">
</div>
<div class="ebayList-Shipping-Returns">
<img src="https://remote.littens.co.uk/returns-policy.png" alt="">
</div>
</div>
<div class="ebayList-LeftCol">
<h3>Shop Categories</h3>
<ul>
<li>Duvets</li>
<li>Pillows</li>
<li>Mattress Toppers</li>
<li>Curtains</li>
<li>Duvet Covers Sets</li>
<li>Cushion Covers</li>
<li>Bedding Bundle Sets</li>
<li>Childrens Room</li>
<li>Nursery & Baby</li>
<li>Livingroom</li>
<li>Bed Linen</li>
<li>Bedspreads / Throws</li>
</ul>
</div>
<div class="ebayList-footer">
<img src="https://remote.littens.co.uk/footer.png" alt="footer">
</div>
</div>
Basically I have this title that says testing. On large screens it isn't centered, and is moved to the right. I want it to be centered, but I can't get it centered. On smaller screens it is to the right of the images and pushing them left, keeping nothing centered. In all cases I want it to be below the images and centered in the page. Thanks.
I keep trying aligns, floats, widths, and margins/ padding but nothing works.
<div class="primary-content">
<span class="title">FTC TEAM 4466</span>
egg
<div class="bot-pod">
<div class="bot">
<img src="img/finalbot.svg" alt="old robot">
</div>
<div class="pod">
<img src="img/finalpod.svg" alt="old robot">
</div>
</div>
<div class="team">
<span class="title">testing</span>
<h1>4466</h1>
<span class="egg"> <p>
egg
</p></span>
</div><!-- End -->
</div><!-- End .primary-content -->
body {
color: #000;
font: 1em/1.5 "Helvetica Neue", Helvetica, Arial, sans-serif;
}
.primary-content{
text-align:center;
font-family: 'Abolition Regular', Helvetica, Arial, sans-serif;
font-size: 15rem;
padding-top:20px;
margin-top:0;
padding-bottom: 50px;
margin-bottom:0px;
display:block;
}
.bot {
float:left;
width:47%;
padding:1px 1px 1px 1px;
margin: 0 1px 0 1px;
}
.pod {
float:right;
width:47%;
padding:1px 1px 1px 1px;
margin: 90.66px 1px 90.66px 1px;
}
#media only screen and (max-width: 1300px) {
.bot {
text-align:center;
width:100%;
padding:0;
margin: 0;
}
.pod {
text-align:center;
width:100%;
padding:0;
margin: 0;
}
img[src="img/finalbot.svg"]{
width:70%;
align-content:center;
}
img[src="img/finalpod.svg"]{
width:70%;
align-content:center;
}
}
I though that the div being below the other ones in the code would do it, but it just doesn't. I think the issue on big screens may be that .bot and .pod are different heights, but I dob't know how to make them equal as it changes as the page gets smaller and bigger. I don't know why my issue is happening for the small screens (under 1300px width).
Thanks again.
set display to flex and add justify.content:center to the CSS properties of the div you are trying to center.
this could happen because you are using an tag in the title,
span tags can not get centered, change this for an h1 tag or another
I did some changes to your code and this is what I came up with:
Feel free to use it
body {
color: #000;
font: 1em/1.5 "Helvetica Neue", Helvetica, Arial, sans-serif;
}
.primary-content{
text-align:center;
font-family: 'Abolition Regular', Helvetica, Arial, sans-serif;
font-size: 15rem;
padding-top:20px;
margin-top:0;
padding-bottom: 50px;
margin-bottom:0px;
display:block;
align-content:center;
}
.bot {
float:left;
width:47%;
padding:1px 1px 1px 1px;
margin: 0 1px 0 1px;
}
.pod {
float:right;
width:47%;
padding:1px 1px 1px 1px;
margin: 90.66px 1px 90.66px 1px;
}
#media only screen and (max-width: 1300px) {
.primary-content{
text-align:center;
font-family: 'Abolition Regular', Helvetica, Arial, sans-serif;
font-size: 4rem;
padding-top:20px;
margin-top:0;
padding-bottom: 50px;
margin-bottom:0px;
display:block;
align-content:center;
}
.bot {
text-align:center;
width:100%;
padding:0;
margin: 0;
}
.pod {
text-align:center;
width:100%;
padding:0;
margin: 0;
}
img[src="img/finalbot.svg"]{
width:70%;
align-content:center;
}
img[src="img/finalpod.svg"]{
width:70%;
align-content:center;
}
}
<div class="primary-content">
<h2>FTC TEAM 4466</h2>
egg
<div class="bot-pod">
<div class="bot">
<img src="img/finalbot.svg" alt="old robot">
</div>
<div class="pod">
<img src="img/finalpod.svg" alt="old robot">
</div>
</div>
<div class="team">
<h2>testing</h2>
<h2>4466</h2>
<p>egg</p>
</div><!-- End -->
</div><!-- End .primary-content -->
This is my first html/css project. I tried to use nav and ul tags to put a Log in option on the top right corner over the image. When I do it shifts everything from the middle. I did google before posting but I haven't been successful. I am just wanting to know if I have to float it over or mess with the padding and margins? Here is the html markup`
<!DOCTYPE html>
<html>
<head>
<title>AudioPhile</title>
<link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>
<section class="intro">
<div class="inner">
<div class="content">
<h1>Audio<img class="logo" src="https://image.ibb.co/n2A7gb/bar_diagram.png" alt=" folder with white music bars">Phile</h1>
<p>Create. Play. Share music anywhere, on any device with unlimited free storage.</p>
<input class="signup" type="email" id="myEmail" value="Type Your Email Here">
<a class="btn-1" href="#">Get Started</a>
<footer class="credits">© Natalie Pickrom</footer>
</div>
</div>
</section>
</body>
</html>`
The CSS:`#import url('https://fonts.googleapis.com/css?family=Archivo+Narrow|Nunito:200');
html, body {
margin: 0;
padding: 0;
height: 100%;
width: 100%;
}
.intro {
height: 100%;
width: 100%;
margin: auto;
background:linear-gradient(0deg,rgba(64,64,64,0.8),rgba(64,64,64,0.8)),url(https://preview.ibb.co/jZbkZw/james_stamler_153487.jpg) no-repeat 95% 95% ;
background-size: cover;
display: table;
top:0;
}
.intro .inner {
display: table-cell;
vertical-align: middle;
width: 100%
max-width: none;
}
.content {
max-width:500px;
margin: 0 auto;
text-align:center;
}
.content h1 {
font-family: "Archivo Narrow", Helvetica, sans-serif ;
color: #F9F3F4;
text-shadow: 0px 0px 300px #000;
font-size: 6em;
padding:0px;
margin:0px;
}
.content p {
font-family: Nunito, "Open Sans", sans-serif;
font-size: 1.253em;
color:#F9F3F4;
Paddding: 0px;
margin-top: 0px;
}
.signup {
border: 0px;
font-family: Nunito, "Open Sans", sans-serif;
letter-spacing: 2px;
color: rgba(128,128,128,0.7) ;
padding: 5px;
width: 67%;
}
.btn-1 {
border-radius:0px;
background-color: #008CBA;
font-family: Nunito, "Open Sans", sans-serif;
color:#F9F3F4;
text-align: center;
text-decoration: none;
text-transform: uppercase;
padding: 3px 10px 4px;
width:50%;
}
.credits {
font-family: Nunito, "Open Sans", sans-serif;
color:#F9F3F4;
text-align: center;
padding: 10px;
}
#media screen and (max-width: 768px) {
.content h1 {
font-size:4em;
}
.btn-1 {
padding: 2px 10px 3px;
width: 25%;
}
p {
font-size: .5em;
}
}
`
Here is the JSfiddle https://jsfiddle.net/1ysegrd6/
Here is what I want to achieve. I want log in where they have home subscribe
I don't know how to ask this...
I made a layout using some css, I have a container div (.truck_info) with 2 elements inside, the first one is on the top, and the second one (.truck_cont) has a height:100% and vertical-align:middle (it covers the whole container), I don't know why the elements inside this second element are not aligned to middle, this is my code:
jsfiddle: https://jsfiddle.net/5qtbkemy/
HTML code:
<div class="truck_slot" >
<table class="table_truck"><tbody><tr>
<td class="truck_colo" style="background-color:#F11; ">
<div class="truck_time">Left pane</div>
</td>
<td class="truck_info">
<div class="truck_stop" style="background-color:#F11; ">Top line</div>
<div class="truck_cont">
<div class="truck_name" style="font-size:28px; ">Middle</div>
<div class="truck_para" style="font-size:11px;">Why this text isn't</div>
<div>middle align?</div>
</div>
</td>
</tr></tbody></table>
</div>
CSS Code:
.truck_slot{
float:left;
width:170px;
cursor:pointer;
margin:5px 8px;
}
.table_truck{
width:100%;
height: 155px;
padding:0px;
border:1px #CCCCCC solid;
border-radius:10px;
padding:2px;
border-collapse: separate;
border-spacing: 0px;
box-shadow: 2px 2px 3px #999;
}
.table_truck td{
font-family:Arial, Helvetica, sans-serif;
color: #666;
}
.table_truck .truck_colo{
height:100%;
width: 55px;
text-align: center;
vertical-align: top;
border-radius: 6px 0 0 6px;
color: #FFF;
}
.table_truck .truck_time{
font-size:13px;
font-weight:bold;
font-family: "Calibri", "Century Gothic", Century, Arial, "Arial Black";
}
.table_truck .truck_info{
height:100%;
vertical-align: top;
color:#666;
}
.table_truck .truck_info .truck_info_div{
height:90px;
overflow:hidden;
}
.table_truck .truck_stop{
border-radius: 0 6px 0 0;
padding: 0 5px;
color: #FFF;
line-height:20px;
font-size:13px;
font-weight:bold;
}
.table_truck .truck_cont{
height: 100%;
vertical-align:middle;
}
.table_truck .truck_name{
font-family:Arial, Helvetica, sans-serif;
font-weight:bold;
padding: 0 14px 0 3px;
/*margin-bottom:10px*/
}
.table_truck .truck_para{
font-family:Arial, Helvetica, sans-serif;
font-weight:bold;
padding-left:3px;
}
I hope you can help me to understand what is wrong.
Thank you!
Add text-align: center and remove the padding on .truck_name.
.truck_para needs a text-align: center too, as does the div below it.
.truck_slot{
float:left;
width:170px;
cursor:pointer;
margin:5px 8px;
}
.table_truck{
width:100%;
height: 155px;
padding:0px;
border:1px #CCCCCC solid;
border-radius:10px;
padding:2px;
border-collapse: separate;
border-spacing: 0px;
box-shadow: 2px 2px 3px #999;
}
.table_truck td{
font-family:Arial, Helvetica, sans-serif;
color: #666;
}
.table_truck .truck_colo{
height:100%;
width: 55px;
text-align: center;
vertical-align: top;
border-radius: 6px 0 0 6px;
color: #FFF;
}
.table_truck .truck_time{
font-size:13px;
font-weight:bold;
font-family: "Calibri", "Century Gothic", Century, Arial, "Arial Black";
}
.table_truck .truck_info{
height:100%;
vertical-align: top;
color:#666;
}
.table_truck .truck_info .truck_info_div{
height:90px;
overflow:hidden;
}
.table_truck .truck_stop{
border-radius: 0 6px 0 0;
padding: 0 5px;
color: #FFF;
line-height:20px;
font-size:13px;
font-weight:bold;
}
.table_truck .truck_cont{
height: 100%;
vertical-align:middle;
}
.table_truck .truck_name{
font-family:Arial, Helvetica, sans-serif;
font-weight:bold;
padding: 0;
/*margin-bottom:10px*/
text-align: center;
}
.table_truck .truck_para{
font-family:Arial, Helvetica, sans-serif;
font-weight:bold;
padding-left:3px;
text-align: center;
}
<div class="truck_slot" >
<table class="table_truck"><tbody><tr>
<td class="truck_colo" style="background-color:#F11; ">
<div class="truck_time">Left pane</div>
</td>
<td class="truck_info">
<div class="truck_stop" style="background-color:#F11; ">Top line</div>
<div class="truck_cont">
<div class="truck_name" style="font-size:28px; ">Middle</div>
<div class="truck_para" style="font-size:11px;">Why this text isn't</div>
<div style="text-align: center">middle align?</div>
</div>
</td>
</tr></tbody></table>
</div>
The correct original answer was deleted by the author, what I used was a flex-box solution, I added 3 lines:
.table_truck .truck_cont{
height: 85%;
vertical-align:middle;
display: flex; /* To use flexbox I need to set a flex display */
flex-direction: column; /* to make it vertical I change the direction to column */
justify-content: center; /* finally, I must set the orientation to center */
}
This is the edited jsfiddle: https://jsfiddle.net/5qtbkemy/5/
I found this link useful to learn quickly about flex-box: https://css-tricks.com/snippets/css/a-guide-to-flexbox/
I hope it helps!
I often use the line-height to height div element in which vertically centered text:
div {
height: 100px;
line-height: 100px;}
I think the problem occurred because of my relative positioning of the scroll box, but I am not sure how to fix that, since the scroll box needs to remain in that position, can anyone help me?
Thanks so much!!
Here is fiddle: http://jsfiddle.net/wp76qjga/
HTML Code:
<script type="text/javascript" src="../Java/jquery.js"></script>
<meta charset="UTF-8">
<title>Feline</title>
<body background="../Images/DSC_8592(sm5).jpg">
<div id="wrapper">
<header id="top">
<h1 style="font-size:60px">L'Auberge De Napoleon III</h1>
<nav id="mainnav">
<ul>
<li><a href="Index.html" >Home</a></li>
<li>Features</li>
<li>Activities</li>
<li>Contact US</li>
<li>Pricing</li>
</ul>
</nav>
</header>
<div id="contactimg">
<img src="http://www.personal.psu.edu/cmr5496/sky_main.jpg">
</div>
<div class="scroll" style="position:relative; left:0px; top:-500px; width:350px; height:480px; padding-left:10px; padding-right:10px; padding-top:10px;">
<div style="position:relative; left:65px"><img style="padding-left:px" width="190px" height="180px" src="../Images/Contact Photos/Map5.png"></div>
<div style="color:rgba(255,255,255,1.00); text-align:justify" class="h1">
<h5>By Car</h5>
<hr width="100%" align="left" color="#39A2E1"/>
</div>
<div style="color:rgba(255,255,255,1.00); text-align:justify; font-weight:200;" class="p">Felines Termenes is situated half an hour from the A61 (Exit 25, Lezignan), and less then an hour from the E 15 (Exit 39, Sigean).</div>
<div style="color:rgba(255,255,255,1.00); text-align:justify; font-weight:200" class="h1"><h5>By Air</h5></div>
<hr width="100%" align="left" color="#39A2E1"/>
<div style="color:rgba(255,255,255,1.00); text-align:justify; font-weight:200" class="p">Budget airlines fly to Carcassonne, Perpignan. Montpellier and Toulouse. The Eurostar goes to Montpellier. It is possible to hire a car at all airports.</div>
<div style="color:rgba(255,255,255,1.00); text-align:justify" class="h1"><h5>By Train</h5></div>
<hr width="100%" align="left" color="#39A2E1"/>
<div style="color:rgba(255,255,255,1.00); text-align:justify; font-weight:200" class="p">The TGV train from Lille and Paris serves Narbonne and Carcassonne. These TGV trains connect with the Eurostar from London. It is possible to hire a car at all railway stations</div>
</div>
<img width="970px" height="600px" style="padding-bottom:20px" src="http://upload.wikimedia.org/wikipedia/commons/2/2a/Junonia_lemonias_DSF_upper_by_Kadavoor.JPG"/>
<div class="hrfancy"><hr width="80%" style="position:relative; top:70x"></div>
<p style="margin: 0px 30px 10px 30px"> The house has been entirely renovated with respect for the original elements like stone walls, wooden beams, … This 5 bedroom house (sleeps 8) is a well equipped property. Situated in one of the most sunny regions of France it profits from a sunny, sheltered court yard and garage in the basement.
This comfortable property is based in the Languedoc-Roussillon region, famous for its recreational activities as here in Cathar country history meets nature. From the village you can reach famous historic towns such as Perpignan, Carcassonne and Narbonne within an hour. Felines is also close to the medieval village of Lagrasse, one of the “les plus beaux villages de France”. A drive to the sea or Spain equally takes you about an hour. Take advantage of your stay and visit some vintners, as Felines-Termenes is on the “Route des 20”, a local initiative of the wine growers of the Corbieres. With your family or with friends, you will appreciate the calm of this 180 sq.m. property. </p>
</article>
<footer>Powered By Ruben © 2015 </footer>
</div>
CSS Code:
.hrfancy { /* taken from http://css-tricks.com/examples/hrs/ */
height: 30px;
border-style: solid;
border-color: black;
border-width: 1px 0 0 0;
border-radius: 20px;
}
.hrfancy:before { /* taken from http://css-tricks.com/examples/hrs/ */
display: block;
content: "";
height: 30px;
margin-top: -31px;
border-style: solid;
border-color: black;
border-width: 0 0 1px 0;
border-radius: 20px;
}
#contactimg {
position:relative;
height:530px;
width:996px;
}
#contactimg img {
height: 100%;
width: 97%;
}
div.scroll {
width: 100px;
height: 100px;
overflow: scroll;
background-color:rgba(27,27,27,0.60)
}
body {
margin: 0px;
color: #151515;
font-family: "Gill Sans", "Gill Sans MT", "Myriad Pro", "DejaVu Sans Condensed", Helvetica, Arial, sans-serif;
background-color: #EFF5F8;
}
#slideshow {
position:relative;
height:530px;
width:996px;
}
#slideshow IMG {
position:absolute;
top:0;
left:0;
z-index:8;
}
#slideshow IMG.active {
z-index:10;
}
#slideshow IMG.last-active {
z-index:9;
}
#wrapper {
width: 100%;
min-width: 740px;
max-width: 1000px;
margin-left: auto;
margin-right: auto;
border:#6627C9;
background-color:#E2CFAF;
padding-left: 17px;
padding-right: 17px;
}
#slideshow img {
height: 100%;
width: 97%;
}
#top {
overflow: hidden;
}
h1 {
margin-top: 0px;
margin-bottom: 14px;
color: #3399DD;
font-family: "Gill Sans", "Gill Sans MT", "Myriad Pro", "DejaVu Sans Condensed", Helvetica, Arial, sans-serif;
max-width: 100%;
text-align: center;
font-weight: 600;
font-size: 36px;
}
h5 {
margin-top: 10px;
margin-bottom: 1px;
color: #3399DD;
font-family: "Gill Sans", "Gill Sans MT", "Myriad Pro", "DejaVu Sans Condensed", Helvetica, Arial, sans-serif;
max-width: 100%;
text-align: left;
}
hr{
margin-top: 0px;
margin-bottom:0px;
}
#mainimg img {
max-width: 100%;
padding-top: 2px;
padding-bottom: 2px;
}
.centered {
margin-left: auto;
margin-right: auto;
}
footer {
padding-top: 2px;
padding-bottom: 2px;
padding-left: 2%;
background-color: #43a6cb;
color: #FFFFFF;
position: relative;
bottom: 0px;
}
a {
font-weight: bold;
text-decoration: none;
}
a:link {
color: #FF6600;
}
a:visited {
color: #FF944C;
}
#mainnav a:hover, #mainnav a:active,#mainnav a:focus , #mainnav a.thispage{
color: #FFFFFF;
text-decoration: none;
background-color: #43A6CB;
}
li:hover hr{
color: orange;
}
#mainnav ul {
list-style-type: none;
margin-top: 0px;
margin-right: 0px;
margin-bottom: 0px;
margin-left: 0px;
padding-top: 0px;
padding-right: 0px;
padding-bottom: 0px;
padding-left: 0px;
}
#mainnav a {
width: 20%;
background-color: #4D4D4D;
text-align: center;
text-transform: uppercase;
color: #FFFFFF;
padding-top: 6px;
padding-bottom: 6px;
display: block;
float: left;
}
#wrapper #main ul.horizontal1 li
{
display: inline-block;
list-style; none;
}
#wrapper #main .horizontal1 img {
height: 250px;
width: 200px;
margin-top: 15px;
}
#wrapper #main ul.horizontal1 li {
display: inline-block;
font-size: 16px;
list-style; none;
padding: 1em;
text-align: justify;
vertical-align: top;
width: 25%;
}
ul.horizontal1 {
list-style; none;
margin: 0;
padding: 20;
font-size: 0;
}
#wrapper #main ul.horizontall li
{
display: inline-block;
list-style; none;
}
#wrapper #main ul.horizontall li {
display: inline-block;
font-size: 16px;
list-style; none;
padding: 1em;
text-align: justify;
vertical-align: top;
width: 50%;
}
ul.horizontall {
list-style; none;
margin: 0;
padding: 0;
font-size: 0;
}
img{
display: block;
}
*
{
box-sizing: border-box;
}
#main {
padding-left: 10px;
paddin-right: 10px;
}
JAVA: (Just in case)
$(document).ready(function() {
$(".popup").hide();
$(".h1").click(function() {
$(".h1").next().slideToggle(700);
});
});
I know it has to do with the following positioning, when I did relative position in the .scroll class to position it over the main image, the space where it used to be still existed.
<div class="scroll" style="position:relative; left:0px; top:-500px; width:350px; height:480px; padding-left:10px; padding-right:10px; padding-top:10px;">
To get you started.
Add the image in #contactimg as a background-image:
#contactimg {
position:relative;
height:530px;
max-width:100%;
background-image:url(http://www.personal.psu.edu/cmr5496/sky_main.jpg);
background-repeat:no-repeat;
background-size: cover;
}
Add the following css to your .scroll (inside your css stylesheet):
div.scroll {
width: 350px;
height:530px;
overflow: scroll;
background-color:rgba(27,27,27,0.60)
}
Remove inline styling from your .scroll (inside your html) from:
<div class="scroll" style="position:relative; left:0px; top:-500px; width:350px; height:480px; padding-left:10px; padding-right:10px; padding-top:10px;">
To:
<div class="scroll">...</div>
Inside the #contactimg insert the .scroll div:
<div id="contactimg">
<div class="scroll">
<div style="position:relative; left:65px"><img style="padding-left:px" width="190px" height="180px" src="../Images/Contact Photos/Map5.png"></div>
<div style="color:rgba(255,255,255,1.00); text-align:justify" class="h1">
<h5>By Car</h5>
<hr width="100%" align="left" color="#39A2E1"/>
</div>
<div style="color:rgba(255,255,255,1.00); text-align:justify; font-weight:200;" class="p">Felines Termenes is situated half an hour from the A61 (Exit 25, Lezignan), and less then an hour from the E 15 (Exit 39, Sigean).</div>
<div style="color:rgba(255,255,255,1.00); text-align:justify; font-weight:200" class="h1"><h5>By Air</h5></div>
<hr width="100%" align="left" color="#39A2E1"/>
<div style="color:rgba(255,255,255,1.00); text-align:justify; font-weight:200" class="p">Budget airlines fly to Carcassonne, Perpignan. Montpellier and Toulouse. The Eurostar goes to Montpellier. It is possible to hire a car at all airports.</div>
<div style="color:rgba(255,255,255,1.00); text-align:justify" class="h1"><h5>By Train</h5></div>
<hr width="100%" align="left" color="#39A2E1"/>
<div style="color:rgba(255,255,255,1.00); text-align:justify; font-weight:200" class="p">The TGV train from Lille and Paris serves Narbonne and Carcassonne. These TGV trains connect with the Eurostar from London. It is possible to hire a car at all railway stations</div>
</div><!-- end scroll -->
</div><!-- end contactimg -->
Remove inline styling from the first div child of .scroll from:
<div class="scroll">
<div style="position:relative; left:65px">...
To:
<div class="scroll">
<div>...
http://jsfiddle.net/fgt7wu8b/