I have a container which has a fixed width of 200px and the rest of the width is margin equally on both sides.
I have applied margin-bottom on this container but it will occupy only the 200px width since that is the width of the container box.
How can i make the border-bottom occupy the entire screen width.
code:
.sch-container{
max-width:200px;
margin:0 auto;
text-align:center;
border-bottom:1px solid red
}
<div class="sch-container">
<div class="content">
Hello
</div>
</div>
FIDDLE
Implementing as two class will be the best choice.
.sch-container{
border-bottom:1px solid red;
}
.content{
max-width:200px;
margin:0 auto;
text-align:center;
}
<div class="sch-container">
<div class="content">
Hello
</div>
</div>
This is not a straight forward solution to your problem, more of an alternative.
You could use <hr /> tag instead of border-bottom on .sch-container.
.sch-container{
max-width:200px;
margin:0 auto;
text-align:center;
}
hr{
height: 1px;
border: 0;
border-top: 1px solid;
}
.red{
border-color: red;
}
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
<title>Some Title</title>
</head>
<body>
<div class="sch-container">
<div class="content">
Hello
</div>
</div>
<hr class="red"/>
</body>
</html>
Related
Hi I created a Search Bar and wrapped it inside a div and have given it the max-width of 500px (100% with to the search Input) but don't know why max width is not working and I search the Stack Overflow and found a link Why would max-width not work on this? and tried this but it didn't worked for me
So can anyone please tell me why its not working and how to make it work :)
Any kind of help is highly Appreciated
*{
margin: 0;
padding: 0;
box-sizing:border-box;
}
body{
font-family:arial;
}
header{
width: 100%;
padding:20px 20px;
}
nav{
display:flex;
justify-content:space-between;
align-items:center;
}
.menu-container{
display:flex;
justify-content:space-between;
align-items:center;
position:relative;
}
.search-input-container{
width:100%;
max-width:500px;
}
input[type="search"]{
border-radius:500px;
padding:5px 10px;
width:100%;
}
ul li{
list-style:none;
}
ul{
margin:10px;
}
button{
outline:none;
border:none;
padding:8px 15px;
}
a{
text-decoration:none;
}
.submenu-items{
position:absolute;
top:100%;
border:2px solid red;
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<header>
<nav>
<!-- Logo Wrapper -->
<div class="logo">
<img src="" alt="Test Logo">
</div>
<!-- Search Wrapper || Issue Area-->
<div class="search-container">
<form action="get">
<div class="search-input-container">
<input type="search" class="search">
</div>
</form>
</div>
<!-- Search Wrapper Ends ↑ -->
<div class="menu-container">
<ul>
<li>
Help
</li>
</ul>
<ul>
<li>
Campagians
</li>
</ul>
</div>
<div class="buttons-container">
<button class="Login-btn">Log in</button>
<button class="signup-btn">Sign up</button>
</div>
</nav>
</header>
</body>
</html>
Instead of max-width, try using width: clamp() (MDN)
I think in your case it would be something like:
.search-input-container {
width: clamp(150px, 400px, 500px);
}
Here 150px is the minimal size,
400px - is the ideal size, that the element wants to be,
and 500px - is the maximum possible size. so it can't grow bigger then that.
That way the input will try to be 400px, but if there is no space - it will shrink down up to 150px.
I've been trying to get this layout to work for smart phones. What I'm looking to do is have a fixed header that doesn't move and then have a flex container underneath the header that takes up the rest of the screen space. Inside the flex container should be 3 sections of the same size that each takes up the size the flex-container.
My current attempt isn't working. I can't figure out how to keep the fixed header from moving and I can't figure out how to get the flex container the right size with each of the sections.
<!DOCTYPE html>
<html>
<head>
<meta name="apple-mobile-web-app-capable" content="yes">
<title>scroll</title>
<style>
html{
margin:0;
padding:0;
height:100%;
}
body{
margin:0;
padding:0;
height:100%;
}
#container{
height:100%;
overflow:scroll;
}
#fixed{
postion:fixed;
top:0;
height:20%;
background-color:lightblue;
}
#flex-container{
display:flex;
flex-direction:column;
justify-content:space-around;
height:80%;
}
.sections{
height:80%;
}
#section1,#section3{
background-color:blue;
}
</style>
</head>
<body>
<div id='container'>
<div id='fixed'>
</div>
<div id='flex-container'>
<div id='section1' class='sections'>
</div>
<div id='section2' class='sections'>
</div>
<div id='section3' class='sections'>
</div>
</div>
</div>
</body>
</html>
If you set the position to fixed or absolute, the element's position must be definite. You either have to additionally set the navbar's width to 100%, or add both the left: 0 and right: 0 properties. Also, don't set each of your sections to height: 80%, but only the flex container. Ensure that each flex item has the flex: 1 property.
Your code should now look like this:
<!DOCTYPE html>
<html>
<head>
<meta name="apple-mobile-web-app-capable" content="yes">
<title>scroll</title>
<style>
html{
margin:0;
padding:0;
height:100%;
}
body{
margin:0;
padding:0;
height:100%;
}
#container{
height:100%;
overflow:scroll;
}
#fixed{
postion:fixed;
top:0;
height:20%;
width: 100%;
background-color:lightblue;
}
#flex-container{
display:flex;
flex-direction:column;
justify-content:space-around;
height:80%;
}
.sections{
flex: 1;
}
#section1,#section3{
background-color:blue;
}
</style>
</head>
<body>
<div id='container'>
<div id='fixed'>
</div>
<div id='flex-container'>
<div id='section1' class='sections'>
</div>
<div id='section2' class='sections'>
</div>
<div id='section3' class='sections'>
</div>
</div>
</div>
</body>
</html>
How to make column height shrink when it is displayed on smaller screen? I used bootstrap 3.3.7 . I made 3 columns inside a row and sat them to col-md-2, col-md-9, col-md-1. They are displayed correctly on md screen and bigger. On small screen they are still displayed fine. However, on small and extra small screen, I want to make first and third columns height shrink to the height of their contents.
Here is a part the HTML code and css I used:
HTML:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" type="text/css" href="bootstrap-3.3.7-
dist/css/bootstrap.min.css">
<link rel="stylesheet" type="text/css" href="bootstrap-3.3.7-
dist/css/bootstrap-theme.min.css">
<link rel="stylesheet" type="text/css" href="second_page.css">
</head>
<body>
<div class="container">
<div class="row">
<div class="col-md-2" id="first_left_column_box">
<div class="left_content" id="first_left_column">
<a class="salehslist" id ="category" href="#"
style="text-decoration:none;"> <center> content
</center> </a>
</div>
<div>
<h1> another content </h1>
</div>
</div>
<div class="col-md-9">
<div class="breadcrumb">
<a id ="category" href="#" > <center> content </center>
</a>
</div>
<div>
<h1> many contents" nested rows and columns" are here</h1>
</div>
</div>
<div class="col-md-1" id="last_right_column_box">
<div class="right_content" id="last_right_column">
<div>
<h1> many contents </h1>
</div>
</div>
</div>
</div>
</div>
<script type="text/javascript" src="jquery-3.1.1.min.js"></script>
<script type="text/javascript" src="bootstrap-3.3.7-dist/js/bootstrap.min.js"
</script>
</body>
</html>
CSS file:
body { padding-top: 70px; }
/* all a tags colors */
a { color: #4285F4; }
/* first left column */
#first_left_column_box{
background-color: #eee;
border-left: 1px #ccc solid;
border-right: 1px #ccc solid;
height:200vh;
margin-bottom: 20px;
}
#first_left_column{
text-align:center;
line-height:50px;
}
/* middle column */
.breadcrumb {
background-color: #eee;
border-top: 1px #ccc solid;
border-bottom: 1px #ccc solid;
margin-bottom: 20px;
}
/* last right column */
#last_right_column_box{
background-color: #eee;
border-left: 1px #ccc solid;
border-right: 1px #ccc solid;
padding: 10px;
height:200vh;
}
#last_right_column{
text-align:center;
line-height:50px;
}
you can use with col- with col-md:
.col- (extra small devices - screen width less than 576px)
.col-sm- (small devices - screen width equal to or greater than 576px)
.col-md- (medium devices - screen width equal to or greater than 768px)
.col-lg- (large devices - screen width equal to or greater than 992px)
.col-xl- (xlarge devices - screen width equal to or greater than 1200px)
try use col-2 and col-md-2 like example:
<div class="col-2 col-md-2" id="first_left_column_box">
Read this... can help you. https://www.w3schools.com/bootstrap4/bootstrap_grid_examples.asp
Bootstrap currently doesn't support anything for automatic resizing of height of columns , we are bounded to use media queries so just use it !!
You will need to use media queries for the separate screens. You can write media queries like so
#media not|only mediatype and (expressions) {
CSS-Code;
}
but it is better to separate the rules which are applicable for the given rules, by creating separate CSS files for the separate sizes:
<link rel="stylesheet" media="mediatype and|not|only (expressions)" href="print.css">
An example for your case:
<link rel="stylesheet" media="screen and (max-width: 699px)" href="small-screen.css">
And put here the rules for small screen. You can create separate CSS files for separate screen size categories.
I'm confused as to how I am supposed to make my posts disappear while scrolling...I want my posts to be like this http://yukoki.tumblr.com/page/4 (so once you scroll, it disappears like his black stary header for example). This is my theme http://macaiylaedwards.tumblr.com/ I'm basically using images as my header if thats the problem but there must be a solution. Tried making another wrap around the posts but it didn't work. I'll leave my coding here as well..thanks.
<!DOCTYPE html>
<html>
<html lang="en">
<head>
<title></title>
<link rel="shortcut icon" href="{Favicon} />"
<meta name="color:Sidebar Background" content="#000000" />
<meta name="color:Background" content="#000000" />
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<style type="text/css">
a:link, a:active, a:visited{
color: {color:Link};
color:#000000;
}
body{
color:#000000;
background-color:{color:bg};
background-image:url({image:background});
Background-attachment: fixed;
background-repeat:no-repeat;
background-size:cover;
margin:0;
word-wrap: break-word;
}
pre {
white-space: pre-wrap;
white-space: -moz-pre-wrap;
white-space: -pre-wrap;
white-space: -o-pre-wrap;
word-wrap: break-word;
}
.desc{
position:fixed;
margin-top:280px;
margin-left:860px;
width:400px;
height:300px;
font-family:0px;
letter-spacing:1px;
}
.nav{
position:fixed;
margin-top:300px;
margin-left:880px;
}
.pt{
width:500px;
margin-top:400px;
margin-left:700px;
background-color:#fff;
position:absolute;
padding:5px;
}
.pt2{
padding:10px;
background-color:#fff;
width:500px;
float:left;
margin:2px;
background-color:transparent;
}
.cutebox{
position:auto;
width:auto;
border:1px solid #292c34;
}
</style>
</head>
<body>
{block:More}READ MORE{/block:More}
<div class="desc">
{description}
</div>
<div style="position: fixed;width: 100%;z-index: 10;">
<img src="http://i1298.photobucket.com/albums/ag50/macaiyla/world_zpswu8twdm2.png" height=650 style="position:fixed;bottom:600px;left:750px;z-index:999"/>
<img src="http://i1298.photobucket.com/albums/ag50/macaiyla/888_zpsopwexxl4.png" height=210 style="position:fixed;bottom:720px;left:550px;z-index:999"/>
</div>
<select style="width: 200px; border: 0px solid; padding: 3px; color: #292c34; background-color: #f1f1f1; font-family: calibri; text-transform: uppercase; font-size: 8px; letter-spacing: 1px; position:fixed;bottom:740px;left:880px;z-index:999" onchange='location=this.options[this.selectedIndex].value;' style='width:100px;'>
<option>Explore</option>
<option value="http://www.tumblr.com/home">Home</option>
<option value="http://www.tumblr.com/about">About</option>
<option value="http://www.tumblr.com/home/photography">Photography</option>
<option value="http://www.tumblr.com/contact">Contact</option>
<option value="http://www.tumblr.com/ask">Ask me</option>
</select>
<div class="pt">
{block:posts}
<div class="pt2"
{block:Photo}
{LinkOpenTag}<img src="{PhotoURL-500}" />{LinkCloseTag}
<div class="cutebox">
{block:Caption}<center>{Caption}</center>{/block:Caption}
</div>
{/block:Photo}
</div>
{/block:posts}
</div>
</body>
</html>
Here is a basic example using some of the code from the tumblr that you linked to.
The template has a div at the top of the theme with the id of top:
<div id="top"></div>
This div has certain css properties, the important one being position:fixed (which means it is always in the viewport when scrolling.
#top {
background-image: url(http://38.media.tumblr.com/tumblr_m8nhk3w96X1r9g6hvo2_250.gif);
top: 0;
left: 0;
width: 100%;
height: 110px;
position: fixed;
z-index: 1001;
}
You have to specify the width when using fixed positioning so in this case set it to 100%. The item also has a height, so in this instance I have added the same amount of padding to the next element as the height of the top div. Otherwise the next element would be hidden beneath the fixed header.
jsfiddle: http://jsfiddle.net/lharby/6Lbtsfwx/
Basically, I have the code:
<div id="footer">
<img src="image here.jpg">
<div style="position:absolute;left:5px;top:0px;">
text here
</div>
</div>
CSS:
#footer { line-height:125px; margin:0 auto; width:500px;height:100%; text-align:center;color:#ECECEC; }
It works lovely on one computer, then if I load it on another the text is offset even further to the left or right depending on monitor/resolution.
How can I set it so it's centered but hovered over/under the image to an offset just right of the image?
EDIT
Small Screen:
Large Screen:
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>stuff here</title>
<style type="text/css">
#footer_container {border:0px solid #666; bottom:0; height:95px; left:0; position:fixed; width:100%; }
#footer { line-height:125px; margin:0 auto; width:500px;height:100%; text-align:center; }
#footer2 { line-height:165px; margin:0 auto; width:500px;height:100%; text-align:center; }
</style>
</head>
<body>
<div id="container">
stuff here
</div>
<div id="footer_container">
<div id="footer">
<img src="http://i.imgur.com/nx8pHGH.png">
<div style="position:absolute;left:500px;top:0px;">
<i><font color=black>dasdasdasd dsad dasdasdas dsadsad ssdasdasd</font>.</i>
</div>
</div>
<div id="footer2">
<div style="position:absolute;left:500px;top:0px;">
<font color=black><b>dasdsa dasdasd dasdasdasd dasdsadsad .</b></font>
</div>
</div>
</div>
</body>
</html>
You need to set position: relative; on the footer if you want the text to be positioned absolute in relation to the footer.
DEMO
Or you can remove all the positioning and the enormous line-height
DEMO
You can use the image as a background-image instead. Then it's much easier to position the text
HTML
<div id="footer">
<a href="http://site.com/" target="_blank">
<div>text here</div>
</a>
</div>
CSS
#footer {
line-height:125px;
margin:0 auto;
width:500px;
height:100px;
text-align:center;
color:#ECECEC;
background-image: url(http://i.imgur.com/nx8pHGH.png);
background-repeat: no-repeat;
}
See JSFiddle