can somebody help me?
I have problem with position in css. I would like to move first div to the right and second div move under it (first picture).When I use float: right for first div it looks like that these components are next to each other (second picture).
<div>
<div>
<button> Button 1 </button>
<button> Button 2 </button>
</div>
<div>
<image></image>
</div>
</div>
Can somebody help me how css file sjhould looklike
how it should look like
how it is now
To achieve a right align, you should use a flex box to hold the button:
<div>
<div style="width: 100%; display: flex">
<button style="margin-left: auto;"> Button 1 </button>
<button> Button 2 </button>
</div>
<div>
<image></image>
</div>
</div>
In this code, style="width: 100%; display: flex"make the div a horizontal container that occupies the whole row. margin-left: auto; on button 1 maximise the left margin of itself, hence pushing both button to the right. In this way, since the first div already occupy the whole first row, the image goes to row 2.
.parent {
border: 1px solid black;
height: 300px;
display: flex;
align-items: center;
flex-direction: column;
}
.nav {
width: 100%;
}
.nav .menu {
float: right;
}
.b-1 {
width: 94%;
text-align: center;
border: 1px solid black;
}
<!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>
<div class="parent">
<div class="nav">
<div class="menu">
<button>Button 1</button>
<button>Button 2</button>
</div>
</div>
<br /><br />
<div class="b-1">
<h2>HELLO</h2>
</div>
</div>
</body>
</html>
Related
I'm making an ebook with Calibre, and the pages are based off xhtml and css files.
I want the page to maintain the same distance between paragraphs no matter what the size of the page is, but using padding as I have already tried doesn't track the size of the page and therefore messes up the aspect ratio, making some text overflow in the next page.
Calibre view
page I'm trying to replicate
#charset "utf-8";
/* Styles for A Manual Of Occultism */
/*** IMPORT CSS FILES ***/
/*** center in page***/
.center {
text-align: center;
vertical-align: center;
padding-top: 50%;
padding-bottom: 50%;
}
#main-title {
text-align: center;
}
#sub-title {
text-align: center;
}
#sub01 {
padding-top: 2%;
}
#sub03 {
padding-top: 10%;
}
<?xml version='1.0' encoding='utf-8'?>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>A Manual Of Occultism</title>
<link href="s0_style.css" rel="stylesheet" type="text/css"/>
</head>
<body>
<div id="wrapper">
<div class="title" id="main-title">
<h1>A MANUAL OF<br/>
OCCULTISM</h1>
</div>
<div class="text" id="sub-title">
<div id="sub01">
<p>BY <br/> “SEPHARIAL”</p>
</div>
<div id="sub02">
<p>AUTHOR OF <br/> “THE MANUAL OF ASTROLOGY”, “ KABALISTIC ASTROLOGY”, <br/> “THE KABALA OF NUMBERS”, ETC.</p>
</div>
<div id="sub03">
<p>LONDON <br/> WILLIAM RIDER & SON, Ltd. <br/> 1914</p>
</div>
</div>
</div>
</body>
</html>
I think you can use flexbox to achieve this, i have also removed unnecessary tags.
You can play with justify-content and height of #wrapper to have exactly the effect that you want
<?xml version='1.0' encoding='utf-8'?>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>A Manual Of Occultism</title>
<link href="s0_style.css" rel="stylesheet" type="text/css" />
</head>
<body>
<div id="wrapper">
<h1>
A MANUAL OF<br />
OCCULTISM
</h1>
<div class="text" id="sub-title">
<p>
BY <br />
“SEPHARIAL”
</p>
<p>
AUTHOR OF <br />
“THE MANUAL OF ASTROLOGY”, “ KABALISTIC ASTROLOGY”,
<br />
“THE KABALA OF NUMBERS”, ETC.
</p>
</div>
<p>
LONDON <br />
WILLIAM RIDER & SON, Ltd. <br />
1914
</p>
</div>
</body>
</html>
body{
height: 100%;
}
#wrapper{
height: 80%;
display: flex;
flex-direction: column;
justify-content: space-around;
align-items: center;
text-align: center;
}
You can play with justify-content and height of #wrapper to have exactly the effect that you want
I've looked at other questions on this website and none of them were similar to my problem, applying flex-direction:row; didnt help, applying all kinds of width's (min-width, max-width) didn't help as well.
Am I using wrong units for styling the items in container?
My goal is for the content to wrap in a new row.
HTML and CSS:
body {
margin: 0;
padding: 0;
background-color: #eeeeee;
}
h1, h5 {
padding: 10px;
margin: 0;
}
.pre-header {
text-align: center;
}
#header-content1-1 {
font-size: 1.15em;
margin: 0;
padding: 0;
}
hr {
margin-top: 20px;
margin-bottom: 3px;
}
.container {
display: flex;
background-color: cornflowerblue;
justify-content:space-between;
max-width: 80%;
margin: auto;
align-items: center;
height: 40vh;
flex-wrap: wrap;
}
.flex-item {
background-color: red;
line-height: 9vh;
width: 13%;
text-align:center;
flex-shrink: 3;
}
<!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">
<meta name="description" content="Find out who was Avicii!">
<link rel="stylesheet" href="style.css">
<title>David</title>
</head>
<body>
<header>
<div class="pre-header">
<h1 id="header-content1">Avicii - Tim Bergling</h1>
<h5 id="header-content1-1">Swedish DJ, remixer, record producer, musician, and songwriter</h5>
</div>
</header>
<main>
<hr>
<div class="container">
<div class="flex-item">E</div>
<div class="flex-item">R</div>
<div class="flex-item">I</div>
<div class="flex-item">N</div>
<div class="flex-item">N</div>
<div class="flex-item">N</div>
<div class="flex-item">N</div>
</div>
</main>
<footer>
</footer>
</body>
</html>
One suggested way as mentioned in comments is having an appropriate width (in your case 22%) so it sums up to 100% some items show up in the next row. One can add margin (like margin: 0% 5%) too to add to the width.
There is one way to do that manually, but you will have to add something similar to breaks in your HTML code. Here is a solution inspired by this.
<div class="container">
<div class="flex-item">E</div>
<div class="flex-item">R</div>
<div class="flex-item">I</div>
<div class="flex-item">N</div>
<div class="flex-item">N</div>
<div class="flex-item break"></div>
<div class="flex-item f2">N</div>
<div class="flex-item f2">N</div>
</div>
.break {
flex-basis: 100%;
height: 0;
}
This uses flex-basis.
Have a look at this codepen for demo.
There is also the option to have add one more level of divs inside your container divs as parents to your flex-item. But overall I would suggest to use the dynamic width and not use these methods as they will only add complexity when your number of boxes are dynamic and will probably require some Js too.
I have following, simple web page. Here I have used vh for image height. But when I resize it to small screen sizes, the size of the background section doesn't resize properly.
Are there any solutions for this problem without remvoing vh.
<html lang="en">
<head>
<link rel="stylesheet" type="text/css" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<style>
section{
background-color: rgb(200,200,200);
padding: 10px 0px 30px 0px;
}
.edit_image img{
max-height: 80vh;
padding: 30px 30px 30px 30px;
}
</style>
</head>
<body>
<div class="container-full" style="padding: 20px;">
<section>
<div class="row">
<div class="col-md-12 col-sm-12 text-center">
<div class='edit_image' img_id=0><img src='http://cdn.wonderfulengineering.com/wp-content/uploads/2016/01/Desktop-Wallpaper-4.jpg'></div>
</div>
</div>
</section>
</div>
</body>
</html>
Wrong (Small screen):
Correct (Normal Web page):
Here is a working solution for you. Basically just added max-width to the css. Also created a fiddle https://jsfiddle.net/9p619qwq/
Please note that the fixed padding (for both the <section> and <img>) is going to cause issues when the page gets smaller as the width and the padding ratios are going to overlap.
section{
background-color: rgb(200,200,200);
padding: 10px 0px 30px 0px;
text-align: center;
}
.edit_image img{
max-height: 80vh;
max-width: 80vw;
padding: 30px;
}
<div class="container-full" style="padding: 20px;">
<section>
<div class="row">
<div class="col-md-12 col-sm-12 text-center">
<div class='edit_image' img_id=0>
<img src='http://cdn.wonderfulengineering.com/wp-content/uploads/2016/01/Desktop-Wallpaper-4.jpg'>
</div>
</div>
</div>
</section>
</div>
hey i notice you forgot to add the viewport meta:
<meta name="viewport" content="width=device-width" /> perhaps this will solve your problem
video.html
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>
<div class="headerBar">
<div class="searchForm">
<form id="search" action="" method="get" target="_blank">
<input id="vb_yt_search-term" name="search_query" type="text" maxlength="128" />
<select name="search_type">
<option value="sAll">All</option>
</select>
<input type="submit" value="Search" />
</form>
</div>
</div>
</body>
</html>
style.css
.headerBar {
background-color: #f1f1f1;
width: 100%;
height: 44px;
border: 0px;
padding:0px;
margin:0px;
position:fixed;
top:0;
left:0;
}
.searchForm {
text-align: center;
border: 0px;
width: 100%;
vertical-align: middle;
position: relative;
}
Code:
Here is the code for you to try.
Question 1:
How can I vertically center the form (TextBox, ComboBox, and Button) in the headerBar using CSS? I want to stick with <div> instead of <table> if at all possible. I want it to be centered dynamically, so that if the page is re-sized, it will re-center... basically it can't be hard coded in with px.
Question 2:
How can I add more elements, once again using the <div> tags so that the items will not be centered, but approximately 1/4 and 3/4 respectively. To give you an example, the top bar in the image is YouTube.com. The Second, is my code. I would like to place objects where the YouTube logo is.
Question 3: (bonus)
This is not important, only an extra. In the picture shown above, is it possible to get the exact search bar and search button onto my form, but allow it to have what ever functionality I want?
Question #1:
Remove height from div.headerBar, this way it will size up with the inputs.
If you want a height, then don't use height. Use line-height:
div.headerBar { line-height: 44px; }
Question #2:
<div class="wrap">
<div class="left"></div>
<div class="mid"></div>
<div class="right"></div>
<div class="clear" />
</div>
.wrap { width: 100%; }
.left { float: left; width: 25%; }
.mid { float:left; width: 50%; }
.right { float:left; width: 24%; }
.clear { clear: both; }
Check fiddle: http://jsfiddle.net/WHXnW/2/
Updated fiddle: http://jsfiddle.net/WHXnW/4/
Now this is closer to what you want. Just play around with the styles to get it just the way you want.
I can't seem to figure out how to align the top of img and copy elements in the promo div. Any thoughts? This doesn't lign up correctly in chrome.
I have looked through a lot of the other questions and cannot seem to figure it out.
At the end of the day i want to be able to have a punch out box at the top left of the div, but I want to make sure that the text overflow does not wrap around the image.
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<style type="text/css">
.promo {
float: left;
width: 200px;
background-color: pink;
}
.promo img {
float: left;
width: 48px;
height: 48px;
background-color: orange;
}
.copy {
float: left;
width: 152px;
background-color: yellow;
}
</style>
</head>
<body>
<div class="promo"> <img src="" alt="" />
<p class="copy">This is the content. I have a lot of contentfff this it s a fodis sod sod sfns s ndosn</p>
<div style="clear:both;"></div>
</div>
<div class="promo"> <img src="" alt=""/>
<p class="copy">This is the content. I have a lot of contentfff this it s a fodis sod sod sfns s ndosn</p>
<div style="clear:both;"></div>
</div>
<div class="promo"> <img src="" alt=""/>
<p class="copy">This is the content. I have a lot of contentfff this it s a fodis sod sod sfns s ndosn</p>
<div style="clear:both;"></div>
</div>
</body>
</html>
Is this what you're talking about: http://jsfiddle.net/NuVww/21/ ?