I have the following code, which displays a header with in each page of my website:
#header {
display: flex;
justify-content: space-between;
align-items: center;
background-color: burlywood;
color: beige;
border-style: groove;
}
#register {
display: flex;
flex-direction: column;
}
<head>
<title>About HatSpace</title>
<link rel="stylesheet" type="text/css" href="css/about_style.css">
</head>
<body>
<div id="header">
<div>
<h1>HatSpace</h1>
</div>
<div id="register">
<form>
<input style="width: 500px;" type="text" placeholder="Search the Website">
</form>
</div>
<div>
<div>
<p>Log in</p>
</div>
<div>
<p>Sign in</p>
</div>
</div>
</div>
Now, how can I add these three texts right beneath it, so that they will be included in the header div too. I've tried various ways, but it rearranges my header...I just want easier navigation for the user, so that when they click home, they go back home no matter which page they are since it's always part of the header.
Thanks
Wrap your first row in another div inside the header and give it the flex properties you're giving the whole header now. Then make another div with the same flex properties after with the three texts. For example:
<div id="header">
<div id="part1">
<div>
<h1>HatSpace</h1>
</div>
<div id="register">
<form>
<input style="width: 500px;" type="text" placeholder="Search the Website">
</form>
</div>
<div>
<div>
<p>Log in</p>
</div>
<div>
<p>Sign in</p>
</div>
</div>
</div>
<div id="part 2">
// About us, etc...
</div>
#part1 {
display: flex;
justify-content: space-between;
}
#part2 {
display: flex;
justify-content: space-between;
}
Related
I have three pieces of text, Events Find an Event and Post an event
Events is positioned correctly in the centre of the page, but Post An Event and Find An Event are positioned left of centre.
How do I put these two pieces of text next to each other (same line) and in the centre of the page?
Tried.
.postanevent {text-align : center! important; display:
inline-block! Important;}
.findanevent] text-align: center! Important; display: inline-
block! Important; }
Here is my html:
<div class="entry-content">
<div class="lasvegas">
Events
</div>
<div class="findanevent"><a
href="https://adsler.co.uk/find-an-event/"></p>
<div class="findanevent"><font size="3"><font
color="white">Find an Event</font></font></div>
<p></a></p>
<div class="postanevent"><a
href="https://adsler.co.uk/post-an-event/"></p>
<div class="postanevent"><font size="3"><font
color="white">Post an Event</font></font></div>
<p></a></p>
</div><!-- .entry-content -->
<footer class="entry-footer">
<span class="edit-link"><a class="post-edit-link"
href="https://adsler.co.uk/wp-admin/post.php?
post=6811&action=edit">Edit <span class="screen-
reader-text">"Events"</span></a></span> </footer><!--
.entry-footer -->
</article><!-- #post-## -->
</div><!-- #primary -->
Page: https://adsler.co.uk/events/
You need a wrapper around the two anchors to center them both in the same line:
.event_wrapper {
text-align: center;
}
<div class="event_wrapper">
<span id="findanevent" class="event">Find an Event</span>
<span id="postanevent" class="event">Post an Event</span>
</div>
don't use the font tag anymore, it is deprecated. You can just use the classes you already have or add a new one like I did.
Hope this helps!
You need to wrap your links inside a div the use display flex. there are many ways to do this but I prefer flex it easy.
<div class="entry-content">
<div class="links-wrapper">
<div class="lasvegas">
Events
</div>
<div class="findanevent">
Find an Event
</div>
<div class="postanevent">
Post an Event
</div>
</div>
</div><!-- .entry-content -->
<style type="text/css">
.entry-content{
width: 100%;
}
.links-wrapper{
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-pack: center;
-ms-flex-pack: center;
justify-content: center;
}
.links-wrapper > div{
margin: 0 15px;
}
</style>
Wrap your findanevent and postanevent divs into a main wrapper like <div class="eventsWrap"> and put this in a display:flex property. So that the two divs will be in same line. Because by default the display:flex property shows the child element into same line like inline or rows. Next you have to add a property is justify-content:center;, align-items:center;, align-content:center; align-self:center;. Hope it may help you! Good luck.
.eventsWrap { display:flex; justify-content:center; align-items:center; align-content:center; align-self:center;}
you can take these 3 in flex box:
<div style=" display: flex;justify-content: center;">
<div Events></div>
<div Find an Event></div>
<div Post an event></div>
</div>
I hope this will help.
Try this one for set links
<div class="entry-content" style="text-align: center;">
<div class="lasvegas">
Events
</div>
<div class="findanevent">
<a href="https://adsler.co.uk/find-an-event/">
<div class="findanevent">
<font size="3">
<font color="black">Find an Event</font>
</font>
</div>
</a>
<div class="postanevent">
<a href="https://adsler.co.uk/post-an-event/">
<div class="postanevent">
<font size="3">
<font color="black">Post an Event</font>
</font>
</div>
</a>
</div>
<!-- .entry-content -->
</div>
<!-- #primary -->
</div>
<style>
.lasvegas{
display: inline-block;
}
.findanevent{
width: 100%;
}
</style>
I hope this one is helpful
I had encountered to an interesting CSS challenge. In the following code I was able to vertically aligned the text and input. The part I couldn't manage was, without breaking the vertical alignment (text - input) I need to put footer text under the input.
.container {
width: 300px;
}
.head {
display: inline-block;
vertical-align: middle;
width: 20%;
}
.col {
display: inline-block;
vertical-align: middle;
}
.col input {
width: 100px;
}
<div class="container">
<div class="head">
Text
</div>
<div class="col">
<input type="text" />
</div>
<div class="col">
<input type="text" />
</div>
<div class="head"></div>
<div class="col">
Footer Text
</div>
</div>
<div class="container">
<div class="head">
Three Line Text
</div>
<div class="col">
<input type="text" />
</div>
<div class="col">
<input type="text" />
</div>
<div class="head"></div>
<div class="col">
Footer Text
</div>
</div>
Also, container div height should effect from footer text as well. So using absolute will not work for this case.
I already aware some JavaScript or CSS hack solutions. But for this case, I want to proceed with a proper way. How can we achieve this properly?
UPDATE
I forgot to mention before. Footer text could be multiple lines as well. It should cover both inputs underneath.
Flexbox can do that but it requires restructuring the HTML and altering a class or two...oh, and a pseudo-element.
.container {
width: 300px;
display: flex;
margin: 1em;
border: 1px solid red;
}
.head {
width: 20%;
display: flex;
flex-direction: column;
justify-content: center;
}
.col,
.second {
display: flex;
flex-direction: column;
justify-content: center;
margin: 0 .25em;
}
input {
width: 100px;
}
.col:before {
content: "";
height: 1.2em; /* or whatever your line-height is */
}
<div class="container">
<div class="head">
Text
</div>
<div class="col">
<input type="text" />
<div class="foot">
Footer Text
</div>
</div>
<div class="second">
<input type="text" />
</div>
</div>
<div class="container">
<div class="head">
Three Line Text
</div>
<div class="col">
<input type="text" />
<div class="foot">
Footer Text
</div>
</div>
<div class="second">
<input type="text" />
</div>
</div>
I am trying to create a webpage for an imaginary pizzeria as practice. I want to insert the header of the webpage in between two images(same) such that the three(image, header, image) elements are in line. But with the code below I am getting a screen like this. How do I get them all on one line?
<body>
<div style='float:left'>
<img src='body.png' style='width:100px; height:100px;'>
</div>
<div style='font-family:amita; font-size:20px;'>
<h1 align='center' style='margin-bottom:5px;'>Ralph's Pizzeria</h1>
</div>
<div style='float:right'>
<img src='body.png' style='width:100px; height:100px;'>
</div>
<hr style='clear:both;' />
</body>
This can be done using display: flex and justify-content: space-between:
.header {
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-pack: justify;
-ms-flex-pack: justify;
justify-content: space-between;
}
<div class="header">
<div>
<img src='body.png' style='width:100px; height:100px;'>
</div>
<div style='font-family:amita; font-size:20px;'>
<h1 align='center' style='margin-bottom:5px;'>Ralph's Pizzeria</h1>
</div>
<div>
<img src='body.png' style='width:100px; height:100px;'>
</div>
</div>
I've added a container div and given it the class header and applied the flexbox to it.
You can simply do this :
header {
text-align: center;
}
h1 {
font-size: 25px;
display: inline-block;
vertical-align: top;
margin-top: 25px;
}
img {
display: inline-block;
width: 100px;
height: 100px;
margin:0 10px;
}
<header>
<img src='https://lorempixel.com/100/100/'>
<h1>Ralph's Pizzeria</h1>
<img src='https://lorempixel.com/100/100/'>
</header>
<hr>
Here's another solution if you want to continue to work with float.
Simply move the 2nd image to before the title.
<body>
<div style='float:left'>
<img src='body.png' style='width:100px; height:100px;'>
</div>
<div style='float:right'> <!-- Just moved this up here -->
<img src='body.png' style='width:100px; height:100px;'>
</div>
<div style='font-family:amita; font-size:20px;'>
<h1 align='center' style='margin-bottom:5px;'>Ralph's Pizzeria</h1>
</div>
<hr style='clear:both;'/>
</body>
However, I suggest using flex-box if you don't have to support older browsers.
Most of the things I create I need centered, but able to scale if necessary, so I use a table layout to help center content as I've done for years. However, wit the introduction of flex I believe this has been made more efficient ( less html ). I've done some research but haven't gotten to a proper cross-browser solution in the time alloted.
So very simply, I need to replace the following code:
<style>
.app-frame {position:fixed;top:0;left:0;width:100%;height:100%;}
.app-frame td {vertical-align:middle;text-align:center;}
.app-content {display:inline-block;border:1px solid gainsboro;max-width:600px;position:relative;}
</style>
<table class="app-frame">
<tr>
<td>
<div class="app-content">
<!--app-->
<div class="slide" id="slide1">
<h1>Step 1: Name your character.</h1>
<p class=info>You can change this at any time after creation.</p>
<label>Character's Name</label>
<input name="charname" />
</div>
<!--/app-->
</div>
</td>
</tr>
</table>
with a solution that allows me to use divs, like so:
<div class="app-frame">
<div class="app-content"> ... </div>
</div>
These are the settings (for the container element) with which you can center all included elements vertically and horizontally using flex:
.slide {
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
}
.slide {
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
}
<div class="app-frame">
<div class="app-content">
<div class="slide" id="slide1">
<h1>Step 1: Name your character.</h1>
<p class=info>You can change this at any time after creation.</p>
<label>Character's Name</label>
<input name="charname" />
</div>
</div>
</div>
This is how to horizontally center a div with css flexbox:
.app-frame{
display:flex;
justify-content:center;
align-items:center;
width:100%
}
<div class="app-frame">
<div class="app-content">Centered DIV</div>
</div>
It's more flexible as you can change your layout without touching the HTML.
I have 2 threads in an imageboard stacked on top of each other, each thread has some text and an image file.
I want images to be always on right of the thread, instead of being on top of reply button.
When I float image to right by float: right; the images keep stacking on top of each other instead and form a branch like structure
How do I force images with post-image class to not break <div> structure of following thread and stay on right of screen?
<div class="you" id="thread_27" data-board="b" align="Right">
<div class="files">
<div class="file">
<p class="fileinfo">File: 1454704253855.jpg <span class="unimportant">(78.69 KB, 1024x768, <span class="postfilename">soft-color-background.jpg</span>)</span>
</p>
<img class="post-image" src="/b/thumb/1454704253855.png" style="width: 255px; height: 192px; max-width: 98%;" alt="">
</div>
</div>
<div class="post op" id="op_27">
<p class="intro">
<input class="delete" name="delete_27" id="delete_27" type="checkbox">
<label for="delete_27"><span class="name">Anonymous (You)</span>
<time data-local="true" datetime="2016-02-05T20:30:54Z">02/05/16 (Fri) 22:30:54</time>
</label> <a class="post_no" id="post_no_27" onclick="highlightReply(27)" href="/b/res/27.html#27">No.</a><a class="post_no" onclick="citeReply(27)" href="/b/res/27.html#q27">27</a>[Reply]</p>
<div class="body">xxxxxx2</div>
</div>
<br class="clear">
<hr>
</div>
<div class="you" id="thread_26" data-board="b" align="Right">
<div class="files">
<div class="file">
<p class="fileinfo">File: 1454704190918.jpg <span class="unimportant">(157.33 KB, 1024x768, <span class="postfilename" title="mac-style-presentation-background.jpg">mac-style-presentation-bac….jpg</span>)</span>
</p>
<img class="post-image" src="/b/thumb/1454704190918.png" style="width: 255px; height: 192px; max-width: 98%;" alt="">
</div>
</div>
<div class="post op" id="op_26">
<p class="intro">
<input class="delete" name="delete_26" id="delete_26" type="checkbox">
<label for="delete_26"><span class="name">Anonymous (You)</span>
<time data-local="true" datetime="2016-02-05T20:29:51Z">02/05/16 (Fri) 22:29:51</time>
</label> <a class="post_no" id="post_no_26" onclick="highlightReply(26)" href="/b/res/26.html#26">No.</a><a class="post_no" onclick="citeReply(26)" href="/b/res/26.html#q26">26</a>[Reply]</p>
<div class="body">xxxxx</div>
</div>
<br class="clear">
<hr>
</div>
when I add CSS
.post-image
{
float: right;
}
it breaks everything.
jsfiddle before
js fiddle after floating post-image to the right
This happens because of float left or right. clear controls the float behavior hence, the ideal way is to make all the float properties inside a container usually div. Sometimes, browser renders it differently so whenever coming to a new container or sibling, ideal way is to clear the float(if you don't need the floating property).
In your code you could probably
Add this:
.clear{
clear:both;
}
to better understand. Also don't forget to play with it to put it ideally where it is required.
If you can use flexbox (no way to old browsers) try something like:
.row{
display: flex;
flex-direction: row;
flex-wrap: nowrap;
justify-content: flex-start;
align-content: stretch;
align-items: flex-start;
}
.col1{
position: relative;
flex: 1 1 100%;
align-self: stretch;
overflow: hidden;
}
.col2{
position: relative;
display: flex;
flex-direction: column;
flex: 0 1 45px;
align-self: stretch;
}
on a html strukture like
<div class="row">
<div class="col1">
</div>
<div class="col2">
</div>
</div>
Add one more div with "clear: both" styling will fix your problem.
<div class="file">
your code here...
<div style="clear:both"></div>
</div>
jsfiddle