I have two html files: index and portfolio. They use the same stylesheet. In index two divs extend to the full width of the container. However in portfolio the div only extends as long as the <h6>. I cannot figure out what is going on and how this could possibly be happening.
.container {
padding-top: 35px;
padding-left:18px;
padding-right:18px;
display:inline-block;
font-size: 0px;
overflow: hidden;
}
.spacer {
height: 2px;
}
h6 {
position:relative;
font-family:"code_boldregular";
font-size:18px;
margin: 0px;
top: 17.5px;
text-align:center;
}
#link1 {
position:relative;
height: 52.5px;
background-color: #545454;
width: 100%;
}
#link2 {
height: 52.5px;
background-color: #545454;
width: 100%;
}
<div class="container">
<div class="spacer"></div>
<div id="navlinks2">
<div id="link1" class="smalllinks"><a id="homeLNK" href="index.html"><h6>Home</h6></a>
</div>
<div class="spacer"></div>
<div id="link2" class="smalllinks"><h6>Portfolio</h6>
</div>
</div>
<div class="spacer"></div>
</div>
Related
I want to make the images in day_time_block can cover the title class.
I also want to make all contents in day_time_block can be shown by overflow-x, but when adding overflow-x: auto; in scroll div, the images in day_time_block were covered by title div. like the following code. How to fix it?
HTML:
<html>
<body>
<div>
<div class="daily_content">
<div class="title">
<img src="https://www.google.com.hk/images/srpr/logo11w.png" class="img_title"/>
<div class="daily_title">Title</div>
</div>
<div class="scroll">
<div class="day_time_block">
<div class="day_time_text">Sunday</div>
<img src="https://www.google.com.hk/images/srpr/logo11w.png" class="daily_img"/>
</div>
<div class="day_time_block">
<div class="day_time_text">Monday</div>
<img src="https://www.google.com.hk/images/srpr/logo11w.png" class="daily_img"/>
</div>
<div class="day_time_block">
<div class="day_time_text">Tuesday</div>
<img src="https://www.google.com.hk/images/srpr/logo11w.png" class="daily_img"/>
</div>
<div class="day_time_block">
<div class="day_time_text">Wednesday</div>
<img src="https://www.google.com.hk/images/srpr/logo11w.png" class="daily_img"/>
</div>
<div class="day_time_block">
<div class="day_time_text">Thursday</div>
<img src="https://www.google.com.hk/images/srpr/logo11w.png" class="daily_img"/>
</div>
</div>
</div>
</div>
</body>
</html>
CSS:
<style>
body {
margin: 0px;
}
.title {
background: #ED3632;
height: 25px;
}
.img_title {
width: 30px;
height: 20px;
float: left;
margin-left: 15px;
margin-right: 5px;
}
.daily_title {
color: #f6ff52;
font-size: 1em;
}
.daily_content {
background: #000000;
height: 3000px;
}
.scroll {
color: #ffffff;
font-size: 1em;
width: 480px;
overflow-x: auto;
white-space: nowrap;
background-color: aqua;
border: 1px red solid;
display: flex;
}
.day_time_block {
float: left;
color: #ffffff;
font-size: 1em;
padding-left: 8px;
}
.day_time_text {
font-size: 1em;
display: inline-block;
}
.daily_img {
width: 30px;
height: 20px;
margin-left: 10px;
position: relative;
top: -10px;
}
</style>
overflow work with display:block...but if you want to use display:flex then create parent div for that and make this display:block and apply overflow on parent div.
hi I'm assigned to do a basic profile page for class, but for one of the html pages I am unable to put the text in front of each individual image, i removed my attempts at it to help ease confusion.
<div class="aboutmeprofile">
<h2 id="h2">Portfolio</h2>
<hr></hr>
<img src="assets/images/gym.jpg" alt="gym">Gym
<img src="assets/images/hiking.jpg" alt="hiking">Hiking
<img src="assets/images/overwatch.jpg" alt="overwatch">Overwatch
<img src="assets/images/running.jpg" alt="running">Running
<img src="assets/images/programming.jpg" alt="programming">Programming
</div>
.aboutmeprofile {
float: left;
background-color: white;
width: 650px;
margin: 10px;
line-height: 150%;
padding: 10px;
margin-top: 30px;
}
You'll need to absolute position your text in front of the image with css. It helps to wrap each image and text item into a block to apply the css.
<div class="aboutmeprofile">
<h2 id="h2">Portfolio</h2>
<hr/>
<div class="item">
<img src="assets/images/gym.jpg" alt="gym">
<span>Gym</span>
</div>
<div class="item">
<img src="assets/images/hiking.jpg" alt="hiking">
<span>Hiking</span>
</div>
<div class="item">
<img src="assets/images/overwatch.jpg" alt="overwatch">
<span>Overwatch</span>
</div>
<div class="item">
<img src="assets/images/running.jpg" alt="running">
<span>Running</span>
</div>
<div class="item">
<img src="assets/images/programming.jpg" alt="programming">
<span>Programming</span>
</div>
</div>
css:
.item {
position: relative;
}
.item span {
position: absolute;
top: 50%;
transform: translateY(-50%);
}
Edit: Added a simplified fiddle example
* {
box-sizing: border-box;
}
.aboutmeprofile {
float: left;
background-color: white;
margin: 10px;
line-height: 150%;
padding: 10px;
margin-top: 30px;
}
.item {
position: relative;
width: 100%;
}
.item span {
position: absolute;
top: 50%;
transform: translateY(-50%);
left: 0;
text-align: center;
width: 100%;
}
<div class="aboutmeprofile">
<h2 id="h2">Portfolio</h2>
<hr/>
<div class="item">
<img src="https://placehold.it/400x300/ddd/ddd" alt="gym">
<span>Gym</span>
</div>
<div class="item">
<img src="https://placehold.it/400x300/ddd/ddd" alt="hiking">
<span>Hiking</span>
</div>
<div class="item">
<img src="https://placehold.it/400x300/ddd/ddd" alt="overwatch">
<span>Overwatch</span>
</div>
<div class="item">
<img src="https://placehold.it/400x300/ddd/ddd" alt="running">
<span>Running</span>
</div>
<div class="item">
<img src="https://placehold.it/400x300/ddd/ddd" alt="programming">
<span>Programming</span>
</div>
</div>
The best way to do this is to create a div for the label and use the image as the background-image for the div.
background-image: image.png
jsfiddle
this is what I came up with. Just add the other images and its respective label:
#h2, #h3 {
color: #4aaaa5;
text-align: left;
font-size: 30px;
font-weight: bold;
font-family: 'Georgia', Times, Times New Roman, serif;}
#linebreak {
clear: both;
border: 1px solid gray;
width: 100%;
margin: 0;
padding: 0;}
.aboutmeprofile {
float: left;
background-color: white;
width: 650px;
margin: 10px;
line-height: 150%;
padding: 10px;
margin-top: 30px;
}
.aboutmeprofile {
float: left;
background-color: white;
width: 650px;
margin: 10px;
line-height: 150%;
padding: 10px;
margin-top: 30px;
}
.container {
height: 100%;
width: 100%;
position: relative;
}
.image {
width:100%;
height:100%;
}
.text {
position: absolute;
color: white;
left: 50%;
top: 50%;
}
<div class="aboutmeprofile">
<h2 id="h2">Portfolio</h2>
<hr>
<div class="container">
<img class="image" src="http://www.jqueryscript.net/images/Simplest-Responsive-jQuery-Image-Lightbox-Plugin-simple-lightbox.jpg" />
<span class="text">
Gym
</span>
</div>
<div class="container">
<img class="image" src="http://www.jqueryscript.net/images/Simplest-Responsive-jQuery-Image-Lightbox-Plugin-simple-lightbox.jpg" />
<span class="text">
Hiking
</span>
</div>
</div>
Hope it helps!
You can simply do this with position:absolute property , first you need to create a relative div , then call the image and h2 inside the div , then set absolute position to h2
Check with the snippet
.content_div {
position:relative;
}
.content_div h2 {
position:absolute;
bottom:25px;
color:#fff;
font-size:18px;
}
.content_div h2 span {
background:rgba(0,0,0,0.8);
padding:10px;
display:block;
border-bottom:2px solid #000;
}
.content_div h2 span:last-child{
border-bottom:none;
}
<div class="content_div">
<img src="http://www.picgifs.com/graphics/c/cute/graphics-cute-160852.jpg" alt="image" />
<h2>
<span>A Movie in the Park:</span>
<span>Kung Fu Panda</span>
</h2>
</div><!-- /.content_div -->
I face the problem that when I put float to my #middle-content. The float doesn't display. Moreover, this removes its background too. I want the middle-content to be at the right of #leftcontent. Help please!!
<body>
<div id="page">
<div id="banner">
<div id="cloud">
<img src="file:///C|/Users/admin/Desktop/DW CS3 Mr.Davis/Final/Cloud4.gif" width="573" height="121" /> </div>
<!--cloud-->
<div id="home">
<h2>HOME</h2>
</div>
<!--home-->
</div> <!--banner-->
<div id="maincontent">
<div id="leftcontent">
<div class="navigation">
Home
</div><!--navigation-->
<div class="navigation">
About Us
</div><!--navigation-->
<div class="navigation">
Products
</div><!--navigation-->
<div class="navigation">
Contact
</div><!--navigation-->
<div class="navigation">
ABOUT US
</div><!--navigation-->
</div> <!--leftcontent-->
<div id="middle-content">
<h1>Welcome To Bagger</h1>
</div> <!--middle-content-->
</div> <!--maincontent-->
</div> <!--page-->
</body>
And this is my CSS
#cloud {
float: left;
padding: 0px;
margin: 0px;
}
#page {
width: 800px;
margin-right: auto;
margin-left: auto;
}
#home {
float: left;
padding-left: 59px;
padding-right: 59px;
text-align:center;
left: auto;
top: auto;
right: auto;
bottom: auto;
padding-top: 37px;
padding-bottom: 37px;
}
#banner {
background-color: #78c8f0;
height: 130px;
}
.navigation {
font-family: Arial, Helvetica, sans-serif;
font-size: 18px;
text-decoration: none;
padding: 10px;
font-weight: bold;
text-align: center;
}
.navigation a {
text-decoration: none;
color: #000000;
background-position: center;
}
#maincontent {
background-color: #A6D2FF;
}
#leftcontent {
width: 150px;
display: table;
}
#middle-content {
width: 400px;
float: left;
}
You need to float the #leftcontent, and to fix the background, add a clear fix
#cloud {
float: left;
padding: 0px;
margin: 0px;
}
#page {
width: 800px;
margin-right: auto;
margin-left: auto;
}
#home {
float: left;
padding-left: 59px;
padding-right: 59px;
text-align: center;
left: auto;
top: auto;
right: auto;
bottom: auto;
padding-top: 37px;
padding-bottom: 37px;
}
#banner {
background-color: #78c8f0;
height: 130px;
}
.navigation {
font-family: Arial, Helvetica, sans-serif;
font-size: 18px;
text-decoration: none;
padding: 10px;
font-weight: bold;
text-align: center;
}
.navigation a {
text-decoration: none;
color: #000000;
background-position: center;
}
#maincontent {
background-color: #A6D2FF;
}
.clear:after {
content: '';
display: block;
clear: left;
height: 0;
}
#leftcontent {
width: 150px;
display: table;
float: left;
}
#middle-content {
padding-top: 1px;
width: 400px;
float: left;
}
<div id="page">
<div id="banner" class="clear">
<div id="cloud">
<img src="file:///C|/Users/admin/Desktop/DW CS3 Mr.Davis/Final/Cloud4.gif" width="573" height="121" />
</div>
<!--cloud-->
<div id="home">
<h2>HOME</h2>
</div>
<!--home-->
</div>
<!--banner-->
<div id="maincontent" class="clear">
<div id="leftcontent">
<div class="navigation">
Home
</div>
<!--navigation-->
<div class="navigation">
About Us
</div>
<!--navigation-->
<div class="navigation">
Products
</div>
<!--navigation-->
<div class="navigation">
Contact
</div>
<!--navigation-->
<div class="navigation">
ABOUT US
</div>
<!--navigation-->
</div>
<!--leftcontent-->
<div id="middle-content">
<h1>Welcome To Bagger</h1>
</div>
<!--middle-content-->
</div>
<!--maincontent-->
</div>
<!--page-->
I have also added 1px top padding to middle-content to stop the h2 margin causing a gap above maincontent
Update
Sounds like your dreamweaver does not support pseudo elements, see if this fixes your clear problem:
change css .clear:after to:
.clear {
display:block;
height:0;
overflow:hidden;
clear:both;
}
and then in the html above, find the divs with the clear class and remove the class, then at the end of those divs, add a physical div to see if it fixes your problem:
<div class="clear"></div>
try this
#leftcontent {
width: 150px;
float:left;
}
#middle-content {
width: 400px;
float: left;
}
also I have added
#maincontent:before,
#maincontent:after{
clear:both;
display:table;
content:"";
}
to fix the background color
working code is here
For your problems, i have the following solutions:
#maincontent can't show its background because its height is 0. You can fix it :
#maincontent {
background-color: #A6D2FF;
height:250px;
}
#leftcontent must have float:left so the middle-content to be at the right of #leftcontent
#leftcontent {
width: 150px;
display: table;
float: left;
}
I'm about to become insane with this css thing. I don't know the language very well..and can't make what I need to do.
I have this html
<div id="content">
<div id="video-content">
<div id="source">
<div id="s-video">
</div>
<div id="source-controls">
</div>
</div>
<div id="preview">
<div id="p-video">
</div>
<div id="preview-controls">
</div>
</div>
</div>
<div id="segment-content">
<ul>
<li></li>
</ul>
</div>
</div>
and I have to achieve this:
so far my css code:
body {
margin: 0;
padding: 0;
/*font-family: Helvetica, Arial, sans-serif;*/
/*color: #666;*/
background: #141414;
/*font-size: 1em;*/
/*line-height: 1.5em;*/
}
#content {
background: dimgrey;
width: 97%;
height: 90%;
position: fixed;
top: 0;
right: 0;
bottom: 0;
left: 0;
margin: auto;
}
#video-content {
background-color: #7F7F7F;
position: fixed;
width: 300px;
z-index: 20;
}
#segment-content {
background-color: #7F7F7F;
position: fixed;
width: 300px;
}
I am not interested in doing this resposive so far
To get a clean grid you'll have to change your html-structure a little bit.
<div id="content">
<div id="video-content">
<div class="row">
<div class="col-1-2">
<div id="source"></div>
<div id="s-video">
</div>
<div id="source-controls">
</div>
</div>
<div class="col-1-2">
<div id="preview">
<div id="p-video">
</div>
<div id="preview-controls">
</div>
</div>
</div>
</div>
</div>
<div class="row">
<div class="col-1-1">
<div id="segment-content">
</div>
</div>
</div>
</div>
Here's an example I made of how to achieve something similar to your screenshot:
Codepen example
You want to switch out the height-properties or remove them completly and let the content fill in dynamically. I used them in this example since we have no content, so that the divs become visible.
body {
margin: 0;
padding: 0;
/*font-family: Helvetica, Arial, sans-serif;*/
/*color: #666;*/
background: #141414;
height:auto;
/*font-size: 1em;*/
/*line-height: 1.5em;*/
}
#content{width:100%;
height:auto;
background: dimgrey;}
#video-content{width:80%;
height:370px;
margin:0 auto;}
#source{width:45%;
float:left;
height:auto;
}
#preview{width:45%;
float:left;
height:auto;
margin-left:10%;
}
#s-video{width:100%;
height:300px;
background-color:black;}
#p-video{width:100%;
height:300px;
background-color:black;}
#source-controls{width:100%;
height:50px;
background:red;
margin-top:20px;}
#preview-controls{width:100%;
height:50px;
background:red;
margin-top:20px;}
#segment-content:after {
content: "";
display: table;
clear: both;}
#segment-content{width:80%;
margin: 20px auto;
height:300px;
background:blue;}
this will work,although not the pretty way of writing css
I think you'd be much better off going with a pre-built framework if that's an option. Something like purecss.io or bootstrap. But this should also work for what you want.
https://jsfiddle.net/w5qfvezg/
.video-display {
background-color: black;
min-height: 200px;
}
.video-description {
background-color: red;
min-height: 50px;
}
body {
padding: 5%;
padding-left: 10%;
padding-right: 10%;
background-color: #999;
}
.video-item {
width: 49%;
float: left;
margin-bottom: 20px;
}
.video-spacer {
width: 2%;
float: left;
min-height: 200px;
}
#segment-content {
background-color: blue;
min-height: 200px;
}
<body>
<div id='video-content'>
<div class='video-item' id='source'>
<div class='video-display' id="s-video">
</div>
<div class='video-description' id="source-controls">
</div>
</div>
<div class='video-spacer'>
</div>
<div class='video-item' id='preview'>
<div class='video-display' id='p-video'>
</div>
<div class='video-description' id="preview-controls">
</div>
</div>
</div>
<div style='clear:both'>
</div>
<div id="segment-content">
<ul>
<li></li>
</ul>
</div>
</body>
I am trying to align multiple divs (buttonNav) to the bottom of a container div (lowerNav). I have read every question on here regarding this and tried the CSS and it does not seem to work. I tried this one: Stacking Divs from Bottom to Top amoung others, hoping someone can help.
Here is my html, I have 5 of the lowerNav containers each with multiple buttonNavs that I want to align to the bottom of the lowerNav here is the code from one, they are all set up the same way:
<div class="lowerNav">
<img src="image/contact-us.gif" width="126" height="27" alt=""/>
<p>Ready to get more information or contact us directly?</p>
<div class="buttonNav">
<p>Order Literature</p>
</div>
<div class="buttonNav">
<p>Downloads</p>
</div>
<div class="buttonNav">
<p>Email Sign-Up</p>
</div>
<div class="buttonNav">
<p>Meet Your Rep</p>
</div>
<div class="buttonNav">
<p>Ask a Question</p>
</div>
</div>
Here is my CSS:
.lowerNav {
width: 160px;
height: 325px;
background-color: #e3dfd7;
border: 3px solid #383431;
float: left;
margin: 15px 8px 0px 8px;
text-align: left;
display: table-cell;
vertical-align: bottom;
}
.lowerNav p {
padding: 5px 12px 12px 12px;
}
.lowerNav img {
padding-top: 12px;
}
.buttonNav {
background:url(image/button-lowerNav.jpg);
width: 160px;
height: 45px;
display: inline-block;
}
.buttonNav p {
text-align:center;
padding-top: 14px;
}
.buttonNav a {
color: #fff;
font-size: 13px;
text-decoration:none;
font-weight:700;
}
.buttonNav a:hover {
color: #fff;
font-size: 13px;
text-decoration:underline;
font-weight:700;
}
Since the container (.lowerNav) has a fixed height and you know the size of its content this is quite easy to do with absolute positioning.
HTML:
<div class="outer">
Hello up here!
<ul class="inner">
<li>Hello</li>
<li>down</li>
<li>there!</li>
</ul>
</div>
CSS:
.outer {
position: relative;
height: 200px;
}
.inner {
position: absolute;
bottom: 0;
}
Check this CodePen for a live example of this code: http://codepen.io/EvilOatmeal/pen/fCzIv