I want to build some basic tiles using HTML/CSS, maybe utilize jQuery UI because I already use it for other things.
I am looking for something like this, and looking for HTML/direction on how to get it inside a web browser.
Namely, look at the HTML below.
Problems with HTML mark-up
description does not float to the bottom
adding subsequent square div boxes (aka "tiles") does not position them to the right of the previous box
<div style="width:100px;height:100px;background-color:lightgrey;text-align:center">
<div style="">Module</div>
<div style="width:100px;height:20px;position:absolute">
<span style=""> description </span>
</div>
</div>
If you just want basic squares with text in them you probably want something like:
<html>
<head>
<style>
.square {
color:black;
border-style: solid;
border-width: 10px;
width: 200px;
height: 200px;
text-align: center;
}
</style>
</head>
<body>
<div class="square">
<h3>Module Name</h3>
<p>Module is used for this and that</p>
</div>
</body>
</html>
If you need to align the description to the bottom of the cell you could look at CSS vertical-align: text-bottom;
For nicely aligning blocks that will appear to the right of each other and then wrap around into a grid, I recommend using lists with inline-block. A fiddle example is here. http://jsfiddle.net/89a07gm3/2
My base result:
.square {
color: black;
border-style: solid;
border-width: 3px;
width: 250px;
height: 200px;
text-align: center;
list-style-type: none;
display: inline-block;
margin: 0px 50px 10px 20px;
position: relative;
}
.child {
position: absolute;
bottom: 0;
width: 100%;
text-align: center;
}
<div onclick="location.href='#';" style="cursor: pointer;" class="square">
<h1>Module Name</h1>
<p class="child">Module is used for this and that</p>
</div>
<div onclick="location.href='#';" style="cursor: pointer;" class="square">
<h1>Module Name</h1>
<p class="child">Module is used for this and that</p>
with credit to Beth + commenters
Related
Im building my first responsive type website, So far doing the index page. Im having an issue when that i cannot align the footer divs together. i have three divs spread out and the last div on the right has social 4 icons. but im unable to get these to align with the other two divs texts. Ive tried a number of different things to fix it in the css and flex though id rather stick to css right now on this site.
Here is the site on test host to see the actual icons in the footer.
https://hireahottub2.netlify.com/
i feel the problem may lie in my code somewhere but i cannot see it for the life of me.
align-items: center
display:inline block is in the parent
<html>
<footer>
<div id="footerwrap">
<div class="fdiv1">
<h5>Hire A Hot Tub, Goole, DN14 6QT</h5>
</div>
<div class="fdiv2">
<h5>Web Design by DM DESIGN</h5>
</div>
<div class="fdiv3">
<a href="https://www.facebook.com/hireahottub2000" target="_blank"
><img src="./img/fb2.png"
/></a>
<a href="https://www.instagram.com/hireahottub2000" target="_blank"
><img src="./img/insta2.png"
/></a>
<a href="https://twitter.com/HireahottubUK" target="_blank"
><img src="./img/twitter2.png"
/></a>
<a href="mailto:hireahottub2000#hotmail.com" target="_blank"
><img src="./img/email2.png"
/></a>
</div>
</div>
</footer>
</html>
/* FOOTER CSS */
footer{
padding: 5px;
margin-top:;
color:#ffffff;
background-color: #354243;
text-align: center;
font: bold;
border-top: #e8491d 3px solid;
}
#footerwrap{
width: 80%;
text-align: center;
}
.fdiv1{
float: center;
display: inline-block;
width: 20%;
}
.fdiv2{
float: left;
width: 20%;
}
.fdiv3{
float: right;
width: 20%;
min-width: 75px;
}
.fdiv3 img{
width: 30px;
}
For your issue specifically, I'm seeing that your divs fdiv1 and fdiv2 only align in the center because of browser-set margins on the heading tags within them. Furthermore, they have zero concept of the height of any other div, because they are floated (removed from document flow). To fix this, you will need to set them all an equal height. Then vertical-align will actually work.
h5 {
margin: 0;
}
.fdiv1, .fdiv2, .fdiv3 {
height: 50px;
}
a {
display: inline-block;
vertical-align: middle;
}
It may be beneficial for you to learn Flexbox. It makes these types of tasks easy, but it's not supported in older browsers.
My recommendations are:
Get rid of all of the float stuff.
Get rid of the width: 20% stuff on the footer items. (Maybe bring it back after you see the results of the rest of this.)
Get rid of the single inner <div> that's a child to the <footer> element (I guess you said you already did that somewhere else, just not on the current demo website).
Use the flex justify-content (space-between) and align-items (center) CSS attributes on your <footer> to spread your footer items out in the proper fashion.
Follow up...
I tried the above, ended up keeping the width: 20%, and got this as a result:
I guess you might want to switch the order of those first two footer items around, but that's not something I could do easily just playing with CSS attributes in my web console.
Use a css grid layout to achieve this.
footer {
padding: 5px;
color: #ffffff;
background-color: #354243;
text-align: center;
border-top: #e8491d 3px solid;
display: grid;
grid-template-columns: repeat(3, 1fr);
align-items: center;
}
footer div img {
width: 30px;
}
<footer>
<div class="fdiv1">
<h5>Hire A Hot Tub, Goole, DN14 6QT</h5>
</div>
<div class="fdiv2">
<h5>Web Design by DM DESIGN</h5>
</div>
<div class="fdiv3">
<img src="./img/fb2.png" />
<img src="./img/insta2.png" />
<img src="./img/twitter2.png" />
<img src="./img/email2.png" />
</div>
</footer>
Hello this is a solution if you want to stick with only CSS ( without flex ) :
footer{
padding: 5px;
position: relative;
margin-top:;
color:#ffffff;
background-color: #354243;
text-align: center;
font: bold;
border-top: #e8491d 3px solid;
}
.fdiv3{
width: 20%;
min-width: 75px;
position: absolute;
top: 50%;
right: 0;
transform: translate(0,-50%);
}
.fdiv2{
width: 20%;
width: 20%;
min-width: 75px;
position: absolute;
top: 50%;
left: 0;
transform: translate(0,-50%);
}
I start to learn HTML and on my website in the middle of the top there should be a heading in the center. In the left top corner, there is a picture.
If I want to set the heading with align="center"; into the middle I can only set it into the middle between the right end of the picture and the right end of the Display...
I hope it's understandable and someone can help me!
The code is:
<div style="float:left; width=600px; height=152px;">
<img src="bilder/logo.jpg" height="54px" width="214px" hspace="0" vspace="0"/>
</div>
<p>
<h1 align="center" style="margin-top:15px; margin-bottom:20px;"><u>Peter Möhle</u></h1>
</p>
enter image description here
It should look like the Picture at the Bottom but this was made mith margin-left and isnt a fixed Position if i use another browser or display
I've updated your snippet as you are using deprecated tags. Happy to hear and clear your doubts, if you have any.
Ref: W3 CSS, W3 HTML
.nav {
width: 100%;
}
.logo-holder {
float: left;
height: 50px;
width: 100px;
}
.logo {
height: 100%;
width: 100%;
}
.nav-text {
text-align: center;
text-decoration: underline;
}
<div class="nav">
<div class="logo-holder">
<img class="logo" src="bilder/logo.jpg" />
</div>
<div class="nav-text">
<h1>Peter Möhle</h1>
</div>
</div>
You can use text-align: center; to centre text, but as mentioned in the comments you are using some deprecated tags.
<h1 style="margin-top: 15px; margin-bottom: 20px; text-align: center; text-decoration: underline;">Peter Möhle</h1>
It's even better to remove the style attribute and create a css file to put the styles in.
CSS
h1 {
margin-top: 15px;
margin-bottom: 20px;
text-align: center;
text-decoration: underline;
}
I'd also change the div markup to
<div style="float: left; width: 600px; height: 152px;">
<img src="bilder/logo.jpg" style="height: 54px; width: 214px;">
</div>
I've used padding to the left now using relative value
<div style="float:left; width=600px; height=152px;">
<img src="bilder/logo.jpg" height="54px" width="214px" hspace="0" vspace="0"/>
</div>
<p>
<h1 style="margin-top:15px; margin-bottom:20px; padding-left: 50% "><u>Peter Möhle</u></h1>
</p>
I'm having a tough time keeping my content centered within a certain width on my personal website. I have tried many methods such as setting body to a fix width and my wrapper container to a percentage of that. I have attached a picture of my website here and highlighted where I want my content to be contained in the picture shown
.
I want my content of my website centered within that highlighted area, while at the same time keeping the background to be the full size of the screen.
I realize this may be a simple question for many, but I have spent all day looking for and trying out different methods to do this with no avail.
body {
background-color: #F0f0f0;
text-align: center;
margin-right: 0px;
margin-left: 0px;
}
.wrapper {
text-align: center;
}
.topSection {
height: 300px;
border: solid 5px;
}
.mainAbout {
padding-left: 50px;
padding-right: 50px;
vertical-align: middle;
}
.mainAbout h1 {
font-size: 60px;
font-family: arvo, sans-serif;
margin-bottom: 5px;
}
#leftBrace {
vertical-align: middle;
}
#rightBrace {
vertical-align: middle;
}
.projects {
height: 864px;
border: solid 5px;
margin-top: 2px;
background: #0F1217;
}
.projects h2 {
color: #e6e6e6;
font-family: arvo, sans-serif;
font-size: 50px;
}
<link href="https://fonts.googleapis.com/css?family=Arvo" rel="stylesheet">
<div class="wrapper">
<!---- Wrapper Starts Here --->
<div class="topSection" style="display:block" ;>
<!---- Name Section Starts Here --->
<div id="leftBrace" style="display: inline-block" ;>
<img src="leftbrace.png">
</div>
<div class="mainAbout" style="display: inline-block" ;>
<!--- Main Name and About me Section ---->
<h1> Benjamin Yan </h1>
<p> I am a Senior Year Computer Science student at Sacramento State <br> University, California. I strive to become a professional Web Developer. </p>
</div>
<!--- End mainAbout --->
<div id="rightBrace" style="display: inline-block" ;>
<img src="rightbrace.png">
</div>
</div>
<!--- Wrapper Ends Here --->
<div class="projects">
<h2> Projects </h2>
</div>
<div class="contact">
</div>
</div>
<!--- Wrapper Ends Here --->
<footer>
</footer>
Instead of using background you could style curly-braces using pseudo selector :before and :after, thus it works like font styling, you could use transform:translate to center your intro text container, check below codes.
#box {
width: 100%;
height: 300px;
overflow: hidden;
background: #ccc;
}
#box > .cnt {
width:50%;
text-align: center;
top: 50%;
left: 50%;
position: relative;
transform: translate(-50%, -50%);
}
#box:before {
content:"{";
font-size: 250px;
position: absolute;
top: 0;
left:10%;
}
#box:after {
content: "}";
font-size: 250px;
position: absolute;
top: 0;
right:10%;
}
<div id="box">
<div class="cnt">
<h1> Benjamin Yan </h1>
<p> I am a Senior Year Computer Science student at Sacramento State <br> University, California. I strive to become a professional Web Developer. </p>
</div>
</div>
Apply margin: 0 auto; to your content class. This will work.
You need to make sure add an inner class inside each wrapper and define your desired width. And need to apply margin: 0 auto to the inner. I added demo snippet.If u want specific wrapper full width just remove innerclass that's enough you will get full width. I hope it will help you.
.wrapper {
height: 300px;
width: 100%;
background: orange;
margin-bottom: 20px;
}
.inner {
width: 70%;
margin: 0 auto;
background: pink;
height: 100%;
}
<div class="wrapper">
<div class="inner"></div>
</div>
<div class="wrapper">
<div class="inner"></div>
</div>
<div class="wrapper">
<div class="inner"></div>
</div>
<div class="wrapper">
<div class="inner"></div>
</div>
I have a flow chart that was originally an image which ought to be simple enough to translate into CSS, but as I have little skill in CSS div manipulation I was hoping the wizards of Stack Overflow could help.
I'm trying to replicate the above image in CSS. It doesn't have to look exactly the same, but I'd like to keep the basic layout the same.
I've taken a stab at the second and third columns just to see if I could get that part figured out, but I can't seem to get the second item in the second column to line up with the first item in the second column.
If someone could help me with just that portion, I would be eternally grateful.
.RoleContainerTop {
border: 1px black solid;
margin: auto;
text-align: center;
width: 100px;
margin: 20px;
float: left;
}
.RoleContainerMiddle {
border: 1px black solid;
margin: auto;
text-align: center;
width: 100px;
margin-top: 75px;
float: left;
}
.RoleContainerBottom {
border: 1px black solid;
margin: auto;
text-align: center;
width: 100px;
margin-top: 150px;
float: left;
}
.RoleContainer p {
text-align: center
}
<div>
<div>
<div class="RoleContainerTop">
<p>
Abracadabra
</p>
</div>
<div class="RoleContainerMiddle">
<p>
Shazam
</p>
</div>
<div class="RoleContainerBottom">
<p>
Alakazam
</p>
</div>
</div>
</div>
I would do something like this. The key is to create your columns of variable width, and from there it's pretty simple. I chose percentage width but you could do it however you like.
I would also advise you to consolidate your css a bit :). You're repeating alot of code that is shared between like elements.
CSS:
* {
box-sizing: border-box;
}
.column-25 {
width: 25%;
padding: 10px;
float: left;
}
.column-25:last-child {
float: right;
}
.block {
width: 100%;
height: 60px;
margin-bottom: 20px;
border: 1px solid #000;
}
.block.center {
margin-top: 40px;
}
HTML:
<div class="container">
<div class="column-25">
<div class="block"></div>
</div>
<div class="column-25">
<div class="block"></div>
<div class="block"></div>
</div>
<div class="column-25">
<div class="block center"></div>
</div>
<div class="column-25">
<div class="block"></div>
<div class="block"></div>
</div>
</div>
From here, you could look into absolute positioned elements with some :before/:after wizardry to create the arrows if you'd like.
jsfiddle demo
http://i.imgur.com/Veauoig.png
I am currently trying to work out how to make the 'From £' text to keep in the same position as the buttons above. The page is responsive so I have been unable to keep the text in one position.
The CSS I have used so far -
element.style {position: absolute; width: 97%;}
I put each of the 'From £' parts in their own class. Not sure if there is an easier way?
<div class="price2">From £300</div>
Any help would be great. Thanks!
Add a container for the element for the price and button so that they remain in context with each other.
http://jsfiddle.net/05orkj1a/
.prices{
width: 100%;
}
.price-column{
display: table-cell;
width: 33%;
text-align: center;
margin: 0 auto;
padding: 0 5px;
}
<div class="prices">
<div class="price-column">
<button>Bass</button>
<div class="price2">From £65</div>
</div>
<div class="price-column">
<button>Mid</button>
<div class="price2">From £300</div>
</div>
<div class="price-column">
<button>Treble</button>
<div class="price2">From £715</div>
</div>
</div>
You could also Float the columns left to cause them to collapse vertically as the screen shrinks with the same html. Just change the margin or padding depending on how far apart you want them spaced
http://jsfiddle.net/z6agt11e/
.prices{
width: 100%;
overflow: hidden;
}
.price-column{
display: block;
float: left;
text-align: center;
padding: 5px 5px;
}
You can also add an outer container and then create a inner container for each button-price set.
Here is the HTML code:
<div class="outter">
<div class="block">
<div class="button">button1</div>
<div class="price2">From £65</div>
</div>
<div class="block">
<div class="button">button2</div>
<div class="price2">From £300</div>
</div>
<div class="block">
<div class="button">button3</div>
<div class="price2">From £715</div>
</div>
</div>
Here the CSS:
.outter{
width:100%;
}
.block{
width:33%;
background-color: yellow;
float:left;
text-align: center;
}
And here a jsfiddle:
http://jsfiddle.net/SoniaGM/ej4mdwx9/1/
Hope it helps.
You can use the CSS3 ::after pseudo-selector.
Give at button class:
position: relative;
Then you have to write something lime this:
.button-class::after {
content: 'From £300';
background: transparent;
height: 1%;
width: 3%;
position: absolute;
top: 20px;
left: 0px;
}
Obviously, you have to change height: 1%; width: 3%; and top: 20px; left: 0px;with whatever you want!