I have a couple of vertically aligned divs which i want to be fixed when window is resized horizontally.
Here is the CSS. Any idea what is missing here? :
.wrapper {
display: block;
float: right;
width: 350px;
margin-right: 5px;
}
.upper-div {
float:right;
margin-top: 10px;
text-align: left;
margin-right:5px;
display: block;
top: 7px;
margin-top: 0px;
margin-bottom: 4px;
font-size: 11px;
height: 11px;
line-height: 11px;
position: absolute;
z-index: 1;
width: inherit;
text-align: right;
}
.lower-div {
line-height: 11px;
font-size: 11px;
bottom: 7px;
height: 11px;
position: absolute;
z-index: 0;
display: block;
width: inherit;
text-align: right;
}
Related
So, it's my first time getting into HTML/CSS and naturally, I'm having problems with certain parts.
I made a "Contine" button in my setup.html and gave it a class so I can style it in my styles.css, now the problem is that text-align center doesnt work on the button. I also have a "Start" button in my index.html, but strangely text-align center works there. I tried giving both buttons the same class and different classes. I'm not sure what to do at this point in time.\
My Button in HTML:
<div class="startcontainer">
<a href="./home.html">
<button id="continue"><span>Continue</span></button>
</a>
</div>
My CSS:
.startcontainer {
position: fixed;
border-radius: 5px;
width: calc(100% - 20px);
height: calc(100% - 120px);
left: 10px;
right: 10px;
bottom: 3%;
margin-bottom: 10px;
padding: 0px;
background-color: #1F1F1F;
float: middle;
text-align: center;
}
.startcontainer a {
position: relative;
display: block;
margin: 0 auto;
top: 40%;
text-decoration: none;
border: 0;
}
.startcontainer a #continue {
position: relative;
max-width: 280px;
max-height: 60px;
line-height: 60px;
padding: 10px 100px;
font-size: xx-large;
background-color: #1F1F1F;
color: #FFFFFF;
opacity: .87;
line-height: normal;
font-family: 'Open Sans', sans-serif;
border: 5px solid #8644A1;
border-radius: 45px;
display: block;
margin: 0 auto;
top: 40%;
transition: 0.4s;
outline: 0;
cursor: pointer
}
.startcontainer a #continue span {
display: block;
line-height: 30px;
}
.startcontainer a #continue:hover {
background-color: #8644A1;
}
Like I said the #contine part in my styles.css is the exact same for the "start" button, but it only works for the start button.
Problem is with max-width: 280px; and padding: 10px 100px; of button.
you are giving padding of 200px on the horizontal scale and then you are limiting button width to 280px. which leaves only 80px for text within. Remove button width for a better look of a button. Alternatively, you can trade off any of the CSS property over others.
.startcontainer {
position: fixed;
border-radius: 5px;
width: calc(100% - 20px);
height: calc(100% - 120px);
left: 10px;
right: 10px;
bottom: 3%;
margin-bottom: 10px;
padding: 0px;
background-color: #1F1F1F;
float: middle;
text-align: center;
}
.startcontainer a {
position: relative;
display: block;
margin: 0 auto;
top: 40%;
text-decoration: none;
border: 0;
}
.startcontainer a #continue {
position: relative;
/* max-width: 280px; */
max-height: 60px;
line-height: 60px;
padding: 10px 100px;
font-size: xx-large;
background-color: #1F1F1F;
color: #FFFFFF;
opacity: .87;
line-height: normal;
font-family: 'Open Sans', sans-serif;
border: 5px solid #8644A1;
border-radius: 45px;
display: block;
margin: 0 auto;
top: 40%;
transition: 0.4s;
outline: 0;
cursor: pointer
}
.startcontainer a #continue span {
display: block;
line-height: 30px;
}
.startcontainer a #continue:hover {
background-color: #8644A1;
}
<div class="startcontainer">
<a href="./home.html">
<button id="continue"><span>Continue</span></button>
</a>
</div>
Hey I'm currently working on a responsive web design for school and it is a disaster. Currently setting up the website before making it responsive and the text and images aren't going where I need them to go. This is my coding for css so far:
body{
background-color: #cd76dd;
font-family: 'Raspoutine Medium';
color:white;
}
#page-wrap{
width: 950px;
margin: 0 auto;
}
#containerIntro h1{
font-family: 'AlphaClouds';
background-color: #7ac8ff;
color:white;
font-size: 45px;
width: 100%;
padding-bottom: 10px;
position: static;
bottom: 0;
left: 0;
}
#containerIntro p{
font-family: 'AlphaClouds';
background-color: #7ac8ff;
color:white;
text-align: left;
font-size: 70px;
width: 100%;
}
h1: hover{
text-shadow: 0px 0px 20px white;
}
h1 p: hover{
text-shadow: 0px 0px 20px white;
}
h1{
position: absolute;
left: 0;
bottom: 0;
}
p{
background-color:#ffa1ff;
color:white;
text-align: left;
padding-top: 20px;
padding-bottom: 20px;
padding-left: 10px;
font-size: 17px;
width: 450px;
height: 100%;
}
h2{
background-color: #ffa1ff;
color:white;
text-align: left;
padding-top: 20px;
padding-left: 10px;
font-size: 20px;
border: 2px #ffa1ff solid;
width: 450px;
height: 100%;
}
h3{
background-color: #ffa1ff;
color:white;
text-align: left;
font-size: 20px;
padding-left: 10px;
border: 2px #ffa1ff solid;
width: 450px;
height: 100%;
}
.gummy{
float: right;
}
.bubble{
float: right;
position: relative; right: -130px;
padding-top: 15px;
}
.pink{
float: left;
position: relative; top: -145px;
}
.blue{
float: right;
position: relative; top: -145px;
}
p.select{
background-color: #5d75ed;
text-align: right;
padding-bottom:10px;
padding-top: 10px;
font-size: 17px;
width: 170px;
float: right;
margin-top: -850px;
}
p.archives{
background-color: #f9e075;
text-align: right;
padding-bottom: 10px;
padding-top: 10px;
padding-left: 10px;
font-size: 17px;
width: 170px;
float: right;
margin-top: -600px;
}
p.resources{
background-color: #ef5b66;
padding-bottom: 10px;
padding-top: 10px;
font-size: 17px;
width: 170px;
float:right;
margin-top: -500px;
}
div{
height: 287;
width: 198;
}
mock up for what it will look like
Inside of #containerIntro h1, you don't need to add position: static due to that being already set by default. Plus if an element is static, direction properties such as bottom, top, left, and right are completely ignored.
Try to use the property called clear and set it to both...
p {
clear: both;/*Element should have no other elements on the left and right side*/
}
clear:both; gets rid of floating objects on both the left and right sides of an element. I hope this helps!
i want to make the text "TITLE" in this html and css code,
#headerf {
background-color: #717571;
overflow-x: hidden;
position: fixed;
z-index: 99999;
}
.headert {
position: fixed;
z-index: 9999999;
width: 100%;
height: 60px;
top: 0px;
}
.headert h3 {
text-align: center;
color: white;
margin-top: 30px;
display: inline-block;
}
.headert a.h-left {
float: left;
color: white;
font-size: 1.5em;
margin-left: 1em;
margin-top: 30px;
position: relative;
display: inline-block;
}
.headert a.h-right {
float: right;
color: white;
margin-top: 30px;
position: relative;
margin-right: 1em;
font-size: 1.5em;
display: block;
}
<div id="headerf" class="headert">
LEFT
<h3>TITLE</h3>
RIGHT
</div>
or this http://jsfiddle.net/didinz/6vp34frd/
i have done everything i know but it still doesnt work(and become worse)
and i'm stuck
Thanks in advance guys ^_^
#headerf {
background-color: #717571;
overflow-x: hidden;
position: fixed;
z-index: 99999;
text-align: center;
}
.headert {
position: fixed;
z-index: 9999999;
width: 100%;
height: 60px;
top: 0px;
}
.headert h3 {
text-align: center;
color: white;
margin-top: 30px;
display: inline-block;
}
.headert a.h-left {
float: left;
color: white;
font-size: 1.5em;
margin-left: 1em;
margin-top: 30px;
position: relative;
display: inline-block;
}
.headert a.h-right {
float: right;
color: white;
margin-top: 30px;
position: relative;
margin-right: 1em;
font-size: 1.5em;
display: block;
}
h3 {text-align: center; display: block; width: 90%; margin: auto; left: 5%; position: absolute; top: 5px;}
<div id="headerf" class="headert">
<h3>TITLE</h3>
LEFT
RIGHT
</div>
If it is one line of text and/or image, then it is easy to do. Just use:
text-align: center;
vertical-align: middle;
line-height: 90px; /* the same as your div height */
that's it. If it can be multiple lines, then it is somewhat more complicated. But there are solutions on http://pmob.co.uk/ Look for "vertical align".
Since they tend to be hacks or adding complicated divs... I usually use a table with a single cell to do it... to make it as simple as possible.
Use it this way:
h3 {
text-align: center;
display: block;
width: 90%;
margin: auto;
position: absolute;
top: 5px;
left: 5%;
}
Snippet
#headerf {
background-color: #717571;
overflow-x: hidden;
position: fixed;
z-index: 99999;
}
.headert {
position: fixed;
z-index: 9999999;
width: 100%;
height: 60px;
top: 0px;
}
.headert h3 {
text-align: center;
color: white;
margin-top: 30px;
display: inline-block;
}
.headert a.h-left {
float: left;
color: white;
font-size: 1.5em;
margin-left: 1em;
margin-top: 30px;
position: relative;
display: inline-block;
}
.headert a.h-right {
float: right;
color: white;
margin-top: 30px;
position: relative;
margin-right: 1em;
font-size: 1.5em;
display: block;
}
h3 {text-align: center; display: block; width: 90%; margin: auto; left: 5%; position: absolute; top: 5px;}
<div id="headerf" class="headert">
<h3>TITLE</h3>
LEFT
RIGHT
</div>
We have two boxes associated with What's Nearby, and Crafting the Perfect Villa Vacation. We would like the left (What's Nearby) box to act very similar to the right (Crafting the Perfect Villa Vacation) box, in that the left box should scale while aligned to the top of the gray container. We have tried many methods, and are coming up short! So basically, the left box should be able to scale while being vertically aligned to the bottom, as the right box does.
Here is our code...
HTML:
<div id="whats-nearby">
<h1>What's Nearby</h1>
<div class="orange-triangle-180"><img src="images/orange-triangle.png"/></div>
<img src="images/whats-nearby.jpg"/>
</div>
<div id="crafting-villa-vacation">
<h1>Crafting the perfect villa vacation</h1>
<div class="orange-triangle-180"><img src="images/orange-triangle.png"/></div>
<img src="images/crafting-villa-vacation.jpg"/>
<h3 class="share-property">Share This Property</h3>
</div>
CSS:
#crafting-villa-vacation {
float: right;
width: 52%;
display: table;
margin-right: 3%;
margin-top: 200px;
margin-bottom: -119px;
}
#crafting-villa-vacation .orange-triangle-180 img{
position: absolute;
top: -18px;
right: 10px;
width: 35px;
}
#crafting-villa-vacation img {
width: 100%;
float: left;
display: table-cell;
vertical-align: bottom;
}
#whats-nearby {
position: absolute;
bottom: 0;
top: 584px;
left: 60px;
z-index: 1;
width: 27%;
}
#whats-nearby img {
width: 100%;
display: table-cell;
}
#whats-nearby .orange-triangle-180 img{
width: 35px;
position: relative;
bottom: 18px;
right: 5px;
margin-right: 420px;
}
See what you can do with this. I messed around with it for a little bit. I got pretty close.
HTML:
<div id="whats-nearby">
<h1>What's Nearby</h1>
<div class="orange-triangle-180"><img src="images/orange-triangle.png"></div>
<img src="images/whats-nearby.jpg">
<h3 class="share-property"></h3>
</div>
CSS:
#crafting-villa-vacation {
float: right;
width: 52%;
display: table;
margin-right: 3%;
margin-top: 200px;
margin-bottom: -119px;
}
#crafting-villa-vacation h1 {
color: #f26649;
text-transform: uppercase;
font-family: 'Minerva', serif;
text-align: left;
padding-bottom: 10px;
font-size: 18px;
}
#crafting-villa-vacation .orange-triangle-180 img{
position: absolute;
top: -18px;
right: 10px;
width: 35px;
}
#crafting-villa-vacation img {
width: 100%;
float: left;
display: table-cell;
vertical-align: bottom;
}
#whats-nearby {
float: left;
width: 27%;
display: table;
margin-left: 5%;
margin-top: 200px;
margin-bottom: -91px;
}
#whats-nearby h1 {
color: #f26649;
text-transform: uppercase;
font-family: 'Minerva', serif;
text-align: right;
padding-bottom: 10px;
font-size: 18px;
}
#whats-nearby .orange-triangle-180 img{
position: absolute;
width: 35px;
}
#whats-nearby img {
width: 100%;
float: left;
display: table-cell;
vertical-align: bottom;
}
#whats-new h3.share-property {
background-color: #0073AE;
text-transform: uppercase;
font-size: 15px;
text-decoration: underline;
color: #fff;
width: 200px;
padding: 5px 10px;
position: relative;
top: -28px;
left: 0;
font-family: 'Minerva', serif;
clear: both;
}
This is what worked for me. See if this will help out. It's very similar to the box floating to the right but instead it floats left with a little different values for positioning.
#whats-nearby {
float: left;
width: 27%;
display: table;
margin-left: 60px;
margin-top: 73px;
margin-bottom: -119px;
}
I'm racking my brain over here, trying to find a way for my divs to stay together when page re-sizing happens. (I made all the colored lines on the page as divs, except for the two vertical and the long horizontal on bottom. That's part of a border). Also for the Title/Menu/Rest-of-the-page to stay cohesive.
A step-by-step would be very appreciated, as I'm kinda new to html and css, and my site is live. You can check it out for hands-on (instead of combing through the code/css I pasted) at http://www.yamatat.com
I'm trying to make the default size at 1366 x 768, as that's that size has the most global share right now.
Here's my html:
<title>You And Me And Thoughts And Talk with Doug Culp</title>
</head>
<div class="page-title-container">
<div id="orangeone"></div>
<div id="blueone"></div>
<div class="page-title">YOU AND ME AND THOUGHTS AND TALK WITH DOUG CULP</div>
<div id="orangetwo"></div>
<div id="bluetwo"></div>
<div id="bluethree"></div>
<div id="bluefour"></div>
<div id="bluefive"></div>
<nav>
<a id="home" class="menu" href="http://www.yamatat.com/index.html">HOME</a>
<a id="podcast" class="menu" href="http://www.yamatat.com/podcast.html">PODCAST</a>
<a id="media" class="menu" href="http://www.yamatat.com/media.html">MEDIA</a>
<a id="blog" class="menu" href="http://www.yamatat.com/blog.html">BLOG</a>
<a id="shows" class="menu" href="http://www.yamatat.com/shows.html">SHOWS</a>
</nav>
</div>
<body>
<h1 class="home_news"><span>NEWS STUFF//</span></h1>
<div id="underline_news"></div>
<div id="news"><span id="news_date">12/24/2013</span>
<p>It's been a wild ride so far. I'm writing this before the site goes live. You guys don't even know!! I learned how to make my own page so that I could make it and put it out for you guys, the listeners. The YAMATATers. Scalloped, baked, french
fried. Any way you want it, THAT's the way you need it. It's 5:20 am. I should really get to bed. Merry Christmas Eve everyone!!</p>
</div>
<a class="twitter-timeline" width="400" height="450" data-dnt="true" href="https://twitter.com/dougathan" data-widget-id="416479074542817280">Tweets by #dougathan</a>
<script>
! function (d, s, id) {
var js, fjs = d.getElementsByTagName(s)[0],
p = /^http:/.test(d.location) ? 'http' : 'https';
if (!d.getElementById(id)) {
js = d.createElement(s);
js.id = id;
js.src = p + "://platform.twitter.com/widgets.js";
fjs.parentNode.insertBefore(js, fjs);
}
}(document, "script", "twitter-wjs");
</script>
</body>
</html>
And here's my css:
.page-title-container {
min-width: 85.375em;
}
h1 {
font-size: 60px;
color: #00BFFF;
text-align: center;
border-width: 10px;
border-radius: 6px;
margin-left: 45px;
margin-right: 45px;
font-family: 'Dosis', sans-serif;
padding-bottom: 0px;
margin-top: -20px;
}
.page-title {
font-size: 60px;
color: #00BFFF;
text-align: center;
border-width: 10px;
border-radius: 6px;
margin-left: 238px;
margin-right: 0px;
font-family: 'Dosis', sans-serif;
padding-bottom: -10px;
padding-top: 25px;
margin-top: -64px;
border-style: solid solid solid solid;
border-color: orange;
width: 1410px;
float: left;
font-weight: bold;
line-height: 55px;
}
a.menu:hover {
color: orange;
}
a:hover {
color: orange;
}
a:hover .body_link {
color: orange;
text-decoration: none;
}
#orangeone {
height: 10px;
width: 255px;
border-radius: 6px;
background-color: orange;
float: left;
margin-left: -8px;
margin-top: -15px;
position: relative;
}
#orangetwo {
height: 10px;
width: 255px;
border-radius: 6px;
background-color: orange;
float: right;
margin-right: 0px;
margin-top: -61px;
position: relative;
}
#orangethree {
height: 62px;
width: 10px;
background-color: orange;
float: left;
margin-left: -5px;
margin-top: 0px;
border-radius: 6px;
position: relative;
}
#orangefour {
height: 62px;
width: 10px;
background-color: orange;
float: right;
margin-right: 0px;
margin-top: 0px;
border-radius: 6px;
position: relative;
}
#orangefive {
height: 10px;
width: 1423px;
background-color: orange;
float: left;
margin-left: 240px;
margin-top: 0px;
border-radius: 6px;
position: relative;
}
#blueone {
height: 10px;
width: 240px;
background-color: #00bfff;
border-radius: 6px;
margin-left: -8px;
margin-top: 15px;
position: relative;
}
#bluetwo {
height: 10px;
width: 245px;
background-color: #00bfff;
border-radius: 6px;
margin-right: 0px;
margin-top: -46px;
float: right;
position: relative;
}
#bluethree {
height: 100px;
width: 10px;
background-color: #00bfff;
float: left;
margin-left: 222px;
margin-top: -40px;
border-radius: 6px;
position: relative;
}
#bluefour {
height: 100px;
width: 10px;
background-color: #00bfff;
float: right;
margin-right: 235px;
margin-top: -40px;
border-radius: 6px;
position: relative;
}
#bluefive {
height: 10px;
width: 1460px;
background-color: #00bfff;
float: center;
margin-left: 223px;
border-radius: 6px;
margin-top: 87px;
position: relative;
}
a.menu {
text-decoration: none;
float: top;
font-size: 46px;
color: black;
position: absolute;
font-family: 'Dosis', sans-serif;
margin-top: 0px;
}
#home {
margin-top: -66px;
margin-left: 400px;
}
#podcast {
margin-top: -66px;
margin-left: 600px;
}
#media {
margin-top: -66px;
margin-left: 890px;
}
#blog {
margin-top: -66px;
margin-left: 1125px;
}
#shows {
margin-top: -66px;
margin-left: 1350px;
}
.home_news, .home_pod {
font-family: Tahoma;
font-size: 55px;
color: black;
margin-top: 25px;
border-bottom: solid 10px black;
text-align: left;
display: inline;
border-radius: 0px;
position: relative;
margin-left: 40px;
}
.home_news span {
position: relative;
top: 12px;
}
.home_pod span {
position: relative;
top: 12px;
}
#news_date {
float: left;
font-weight: bold;
font-size: 30px;
margin-top: -20px;
margin-left: 0px;
}
#news {
float: left;
font-size: 24px;
margin-left: 40px;
margin-top: 105px;
width: 650px;
white-space: normal;
word-wrap: break-word;
}
.home_pod {
position: relative;
top: 12px;
font-family: Tahoma;
font-size: 55px;
color: black;
text-align: left;
margin-left: 40px;
}
#pod_date {
font-weight: bold;
font-size: 30px;
}
#pod {
font-size: 24px;
margin-top: 105px;
width: 650px;
white-space: normal;
word-wrap: break-word;
margin-left: 45px;
}
.twitter-timeline {
float: right;
margin-right: 10px;
margin-top: 25px;
}
a#Eegg_1 {
float: left;
margin-left: 35px;
margin-top: -110px;
}
#Eegg_1_expl {
float: left;
color: black;
display: block;
margin-top: 155px;
margin-left: -287px;
font-size: 18px;
}
a#youtube_link {
float: right;
margin-right: 210px;
margin-top: -5px;
}
a:hover #youtube_small {
float: right;
}
#bloggy_head {
float: left;
text-decoration: none;
margin-left: 800px;
margin-top: 50px;
}
#bloggy_doit {
float: left;
font-family: Courier;
font-size: 70px;
margin-left: 745px;
margin-top: 50px;
font-weight: bold;
}
.body_link {
color: black;
text-decoration: none;
}
.home_shows {
font-family: Tahoma;
font-size: 55px;
color: black;
margin-top: 25px;
float: left;
}
#underline_shows {
height: 10px;
width: 275px;
background-color: black;
float: left;
margin-left: -323px;
margin-top: 85px;
}
#show_calendar {
float: left;
font-size: 24px;
margin-left: -320px;
margin-top: 105px;
width: 650px;
white-space: normal;
word-wrap: break-word;
}
You could do this much simpler with a bookend design using images.
For example:
[Bookend Left Image][Title + Nav Div with flexible width and background][Bookend Right Image]