I have a html page I'm working on. I have a div called "featuredcontent" that I'm going to add an N number of elements with class "item" to. I want the featuredcontent box to scroll horizontally when I exceed the space in the layout. Sort of like iTunes does their songs. My problem is when I try to do this and define the boxes to be a certain width they don't expand properly. Here's my rough draft of the code.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>Untitled Document</title>
<style type="text/css">
<!--
* {
padding:0px;
margin:0px;
font-family:Arial, Helvetica, sans-serif;
}
#container {
width:990px;
margin-left:auto;
margin-right:auto;
}
#header {
margin-top:20px;
text-align:left;
overflow: auto;
}
#featured {
width: auto;
float: left;
text-align: left;
}
#navbar {
padding-top:5px;
}
#navbar a {
color:#000;
padding-right:40px;
font-weight:bold;
text-decoration:none;
font-size:20px;
}
#navbar a:hover {
text-decoration:underline;
}
#logo {
width:290px;
height:250px;
float:right;
vertical-align:50%;
background:url(logo.jpg);
}
#main {
margin-top: 30px;
}
#mainfeature {
overflow:auto;
white-space:nowrap;
}
.item {
width:150px;
height:300px;
margin-right:10px;
color:#0FF;
display:inline;
}
-->
</style>
</head>
<body>
<div id="container">
<div id="header">
<div id="featured">
<img width="700" height="225" src="#" />
<div id="navbar">LinkLinkLinkLink</div>
</div>
<div id="logo"></div>
</div>
<div id="main">
<div id="mainfeature">
<div class="item"> asdf</div>
<div class="item"> adsf</div>
<div class="item"> adf</div>
<div class="item"> ad f</div>
<div class="item"> adsdfewsgewt</div>
</div>
<div id="secondaryfeature"></div>
<div id="socialbar"></div>
</div>
<div id="footer"></div>
</div>
</body>
I think its navbar that needs to scroll. It also needs a width:
#navbar {
width: 990px;
padding-top:5px;
overflow-x: auto;
}
If you want to have a custom scrollbar, I think you can look to jScrollPane. (http://jscrollpane.kelvinluck.com/)
The CSS property "overflow-x" is a good answer, but I hate the default scrollbars. ;)
Give that a try:
#featured {
overflow-x: scroll;
}
Related
I have a row split in 4 columns on a footer section, in the last column to the right I want to add something like the picture attached, but I want to preserve the look of the image and text together along all screens sizes, with what I have only works for smaller screens, and the wider the screen gets, the image and the text separate each other apart too much. How can I achieve this?
.wrapper {
position:relative;
text-align:center;
margin:0 auto;
}
.footer {
font-size:40px;
color:black;
}
.talk {
position:absolute;
text-align:left;
bottom:0;
}
.footer-logo {
vertical-align: bottom;
float:right;
height:150px !important;
}
<div class="wrapper">
<p class="footer talk">Big Text</p>
<img class="footer-logo" src='http://via.placeholder.com/140x100'>
</div>
you can simply set the display of 'image' and the 'text' element to :inline
or chage the < p > tag to < span >,
because < p > tag takes the whole line and they couldn't take place together!
but < span > tag is an inline element which takes the content width (and not the screen width)
here is a useful explanation about "display" property.
.wrapper {
display: block;
position:absolute;
right:0;
bottom:0;
text-align:center;
margin:0 auto;
}
.footer {
display: inline;
}
.talk{
font-size:40px;
color:black;
}
.logo{
height: 150px;
width: auto;
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<link rel="stylesheet" href="index.css">
</head>
<body>
<div class="wrapper">
<span class="footer talk">Big Text</span>
<img class="footer logo" src='http://via.placeholder.com/140x100'>
</div>
</body>
</html>
You can try This Code.
I'am add some media queries and some div to in html page
Html
<div class="wrapper">
One Columns
</div>
<div class="wrapper">
two Columns
</div>
<div class="wrapper">
three Columns
</div>
<div class="wrapper">
<div class="A">
<p class="footer talk">Big Text</p>
<img class="footer-logo" src='http://via.placeholder.com/140x100'>
</div>
</div>
CSS
.wrapper {
position:relative;
text-align:center;
margin:0 auto;
width:25%;
float:left;
}
.footer {
font-size:40px;
color:black;
}
.talk {
position:absolute;
text-align:left;
width:50%;
float:left;
}
.footer-logo {
vertical-align: bottom;
float:right;
height:150px !important;
width:50%;
float:right;
}
.A{
width:100%;
}
#media (max-width:525px){
.A{
width:100%;
}
.footer-logo {
width:20%;
float:right;
}
.talk {
width:20%;
float:left;
font-size:28px;
}
}
I want to make a container in the middle of the screen and put some div itmes in.
I want sth like this.
I stripped down the html to its essentials for you people.
<!DOCTYPE HTML>
<html lang="nl">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<title>Webshop</title>
<link href="../css/boilerplate.css" rel="stylesheet" type="text/css">
<style type="text/css">
#content {
position:relative;
width:200px;
height:115px;
background-color:#F00;
top: 900px;
margin:10px;
padding:10px;
display:inline-block;
}
#container {
max-width: 960px;
background: #FFF;
margin: 0 auto;
min-height:100%;
height: auto;
padding-top:0;
padding-left:1em;
padding-right:1em;
padding-bottom:0;
}
</style>
</head>
<body style="background-color:#CF6" >
<div id="container">
<div id="content"> </div>
<div id="content"> </div>
<div id="content"> </div>
</div>
</body>
</html>
The result is awful.
I dont really understand, what you want but have a look at this :
http://jsfiddle.net/u7k6cyf5/
#content {
position:relative;
width:200px;
background-color:#F00;
margin:10px;
padding:10px;
display:inline-block;
}
I'm new to HTML / CSS. I want to build a web site but I stumbled across a problem.
My divs inside my "content div" have a blank space at the top from the line div, and I can't seem to figure out what is causing the problem. Can someone please help? I will much apreciate it.
Thank you!
<head>
<meta charset="utf-8">
<title>Vlad Olar</title>
<style type="text/css">
body {
padding:0;
margin:0;
font-family:Lato, Segoe, "Segoe UI", "DejaVu Sans", "Trebuchet MS", Verdana, sans-serif;
background-color:#D8DCE1;
}
.clear {
clear:both;
}
.fixedwidth {
width:960px;
margin:0 auto;
padding:0 0;
}
#topbar {
background-color:#4C7585;
height: 40px;
width: 100%;
}
#front {
height: 360px;
width: 100%;
background-color:#D8DCE1;
}
#line {
height:10px;
width:100%;
background-color:#4C4C4C;
}
#foto {
height:120px;
width:120px;
background-color:#4C4C4C;
border-radius:60px;
z-index:3;
float:left;
position:relative;
top:-55px;
margin-left:103px;
}
#gaming {
height:120px;
width:120px;
background-color:#4C4C4C;
border-radius:60px;
z-index:3;
float:right;
position:relative;
top:-55px;
margin-right:103px;
}
#design {
height:120px;
width:120px;
background-color:#4C4C4C;
border-radius:60px;
z-index:3;
float:left;
position:relative;
top:-55px;
margin-left:198px;
}
#content {
margin:0;
padding:0;
}
#fotocontent {
background-color:#A48251;
height:500px;
width:320px;
float:left;
}
#designcontent {
background-color:#D1A366;
height:500px;
width:320px;
float:left;
}
#gamingcontent {
background-color:#A48251;
height:500px;
width:320px;
float:left;
}
#footer {
background-color:#4C7585;
height: 40px;
width: 100%;
}
#container {
margin:0;
padding:0;
}
</style>
</head>
<body>
<div id="container">
<div id="topbar">
<div class="fixedwidth">
</div>
</div>
<div id="front">
</div>
<div id="line">
<div class="fixedwidth">
<div id="foto">
</div>
<div id="design">
</div>
<div id="gaming">
</div>
</div>
</div>
<div class="clear">
</div>
<div id="content">
<div class="fixedwidth">
<div id="fotocontent">
</div>
<div id="designcontent">
</div>
<div id="gamingcontent">
</div>
</div>
</div>
<div class="clear">
</div>
<div id="footer">
<div class="fixedwidth">
</div>
</div>
</div>
</body>
As #HiddenHobbes wrote you have the problem because of #foto, #design and #gaming are pulling down .clear div (remove top: -55px; and you will see it).
If you do not want to recalculate margins you can wrap those block in some wrapper with position: absolute; to prevent pulling down behaviour on next div.
In your html
<div id="line">
<div class="fixedwidth">
<div class="foowrapper">
<div id="foto"></div>
<div id="design"></div>
<div id="gaming"></div>
</div>
</div>
</div>
And in your css
.foowrapper {
position: absolute;
width: 100%;
}
.fixedwidth {
position: relative;
}
Fiddle demo
I know your new to html and css but you realy need to make your css in a different file, to do this use <link rel="stylecheet" href="style.css">
Also you should start every html file with this:
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
(content)
</body>
</html>
But to anwser your question:
"My divs inside my "content div" have a blank space at the top from the line div"
This can easly be solved by given the div a margin-top:-(x)px;
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
<style>
#left {
float:left;
width:180px;
background-color:#ff0000;
height:40px;
}
#right {
width: 100%;
background-color:#00FF00;
}
</style>
</head>
<body>
<div>
<div id="left">
left
</div>
<div id="right">
right
</div>
</div>
</body>
</html>
Here i have got two div's left and right. Height of left div is 40px how can i make the height of right 40px and also if the height of left changes height of right also must be changed same height as that of left div.
You could do it like this:
#div {
display: table;
width: 100%;
}
#left {
width:180px;
background-color:#ff0000;
height:40px;
display: table-cell;
}
#right {
background-color:#00FF00;
display: table-cell;
}
<div id="div">
<div id="left">left</div>
<div id="right">right</div>
</div>
Thanks to #t.niese
You can do it simply by using jquery
FIDDLE DEMO
$('#right').css('height', $('#left').height()+'px');
Try Demo
#container
{
height:40px;
}
#left {
float:left;
width:180px;
background-color:#ff0000;
height:100%;
}
#right {
width: 100%;
background-color:#00FF00;
height:100%;
}
<div id="container">
<div id="left">
left
</div>
<div id="right">
right
</div>
</div>
I have a footer div that is just a solid colour that I would like to sit at the bottom outside of my container DIV which is called 'mainhome'. I would like it to stretch the entire site. It just keeps sitting on top of my banner - I'm getting lost in the code now so maybe i have just missed something small?
Thank you in advance
MY HTML
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>Untitled Document</title>
<link href="style.css" rel="stylesheet" type="text/css" />
</head>
<body>
<div class="mainhome">
<div class="header">
<div class="menubutton-leftside" style="margin-right:23px"><h2>home</h2></div>
<div class="menubutton-leftside" style="margin-right:20px"><h2>about</h2></div>
<div class="menubutton-leftside" style="margin-right:30px"><h2>portfolio</h2></div>
<div class="menubutton-leftside" style="margin-right:27px"><h2>contact</h2></div>
<div class="logo"><img src="images/es-logo.png" width="170" height="170" /></div>
<div class="menubutton-rightside" style="margin-left:17px"><h2>print</h2></div>
<div class="menubutton-rightside" style="margin-left:25px"><h2>digital</h2></div>
<div class="menubutton-rightside" style="margin-left:38px"><h2>illustration</h2></div>
<div class="menubutton-rightside" style="margin-left:20px"><h2>brand</h2></div>
</div>
<div class="mainimage">
<div id="slider_container">
<div id="slides">
<img src="images/slider/emmasteed.png" alt="Emma Steed Graphic Art and Web Design" />
<img src="images/slider/graphicdesign-desk.png" alt="Emma Steed Graphic Art and Web Design" />
</div>
</div>
<div class="bluebar"></div>
<div class="largemenubutton" style="margin-right:36px"><img src="images/portfolio.png" /></div>
<div class="largemenubutton" style="margin-right:36px"><img src="images/getintouch.png" /></div>
<div class="largemenubutton"><img src="images/aboutme.png" /></div>
</div></div>
<div class="footer"></div>
</body>
</html>
MY CSS
#charset "UTF-8";
/* CSS Document */
body {
background-image:url(images/header-background.png);
background-repeat:repeat-x;
margin:0;
padding:0;
}
.mainhome {
width: 855px;
margin-top: 0;
margin-right: auto;
margin-bottom: 0;
margin-left: auto;
}
.header {
height: 236px;
background-image:url(images/header-background.png);
background-repeat:repeat-x;
clear:left;
}
.mainimage {
width: 855px;
height: 423px;
background-color:#0C9;
position:absolute;
top:220px;
float:left;
z-index:-1;
}
#slider_container {
width:855px;
height:423px;
overflow:hidden;
}
.bluebar {
width: 855px;
height: 16px;
background-color:#334d5c;
clear:left;
float:left;
}
.menubutton-leftside {
width:60px;
height:20px;
float:left;
margin-top:95px;
}
.menubutton-rightside {
width:60px;
height:20px;
float:left;
margin-top:95px;
text-align:right;
}
h2 {
font-family:Tahoma, Geneva, sans-serif;
font-size:12px;
font-weight:normal;
color:#666;
display:inline;
}
.logo {
width:170px;
height:170px;
float:left;
margin-top:30px;
}
.largemenubutton {
width:261px;
height:259px;
float:left;
margin-top:20px;
}
.footer {
width:100%;
height: 61px;
background-color:#334d5c;
clear:left;
}
It doesn't look like .nameimage needs to be absolutely positioned, but it depends on what you want it to do. Rough example: http://codepen.io/anon/pen/oAbJy.
likely the easiest thing to do, if you ALWAYS want that to be at the very bottom is just give it a fixed position. Add the following to your CSS for the footer. (you may also have to set height and width on the body to 100%)
position: Absolute;
bottom: 0px;