So far, I only have a div that would contain this information. As for the content inside, I'd love some help or guidance on how I could elegantly use HTML with CSS to format the information here.
What HTML elements would you use? What I have trouble with is setting that blue gradient there. Do I set it as a background image? Any suggestions?
This is just a simple example for myself, I'm trying to get more familiar with CSS. Thank you for your time.
<!DOCTYPE html>
<html>
<head>
<meta charset=utf-8 />
<title>JS Bin</title>
<!--[if IE]>
<script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script>
<![endif]-->
<style>
article, aside, figure, footer, header, hgroup,
menu, nav, section { display: block; }
.card {
min-width:250px;
border-radius:10px;
background-color:#09f;
padding:10px;
border:3px solid #03f;
font-family:Sans-Serif;
display:inline-block;
}
.avatar {
border:1px solid #000;
}
.card h1 {
display:inline;
vertical-align:top;
font-size:1.2em;
font-weight:bold;
}
.info {
clear:both;
}
.title {
font-weight:bold;
float:left;
}
.value {
float:left;
margin-left:20px;
}
</style>
</head>
<body>
<div class="card">
<img src="http://en.gravatar.com/userimage/16359447/fc9081765352a27b17cdbf4c24fe3544.jpeg" class="avatar">
<h1>Thomas Shields</h1>
<div class="info">
<span class="title">Info #1:</span>
<span class="value">Value #1</span>
</div>
<div class="info">
<span class="title">Info #2:</span>
<span class="value">Value #2</span>
</div>
<div class="info">
<span class="title">Info #3:</span>
<span class="value">Value #3</span>
</div>
</div>
</body>
</html>
http://jsbin.com/ajevap/2/edit
If you need me to explain any of it, comment and i'll udpate the answer.
I would use images lists spans and divs to separate everything. The best way you can think about html and css is html is the steel i-beams of the webpage. The create the structure but attribute nothing more than that. Then css is the walls, speckle, and paint. So when you look at the design you have you should think about what the "building structure" would be.
Probably an image on top, than a name. The user name is probably by it's self. lastly there is a list of further user info.
<div>
<img>
<span>
<ul>
<li>
<span>
<span>
would be an acceptable structure. Now to create your style you need to move and position things like you want.
div {
height
width
position: relative
div img {
position
height
width
div span {
postion
color
text-decoration
div ul {
position
color
div ul li
color
This could get you an the basic structure of the image you provided depending on what you actually provide to each argument.
http://jsfiddle.net/efortis/s9zSN/2
Related
I'm having trouble doing my homework with an HTML exercise. Basically I have to place multiple images in different locations on the screen/body but the problem comes from placing a line "hr" element to the right of the image..mine is being placed under it. Here are the photos with my progress and the exercise. I would be glad if someone could help me. Have a great day!
[1] https://imgur.com/6SWWGx1 "Exercise"
[2] https://imgur.com/0qL3V32 "My Progress"
<!DOCTYPE html>
<html>
<head>
<title>ES 8</title>
</head>
<body>
<img src="erba.jpg" width="10%">
<hr>
<img src="erba.jpg" width="30%">
<img src="erba.jpg" width="10%" align="top">
<div><hr align="left" width="20%"></div>
</body>
</html>
That's because by default most elements including <hr/> and <div/> are full-width boxes - or blocks stacked on top of each other. Read a bit more about the box-model of CSS elements here.
Taking it out of that <div/> and changing the <hr/>'s CSS to display: inline-block will add it to the side because it will set it as "inline" to the images. Keep in mind this will only work if it actually has room - so elements widths and borders and margins put together <= 100%.
You can also achieve the same effect with a transparent </div> where you just set one of its border to be visible instead of using <hr/>.
However, looking ahead at the rest of the exercise as well you will probably want to look at at some general layout elements such as flexbox and grid. They make positioning things in the page a whole lot easier once you get the hang of them.
Do you want something like this?
.upper img{
width:15%
}
.lower{
display:flex;
border-top:1px solid black;
padding-top: 1rem;
margin-top:1rem
}
section{
flex-basis:calc(100% / 3);
}
section img{
width:100%
}
section:nth-child(2) div:first-child img{
width:25%
}
section:nth-child(2){
margin:0 1rem;
}
section:nth-child(2) div:nth-child(2){
display:flex;
justify-content:flex-end;
border-top:1px solid black;
padding-top:1rem
}
section:nth-child(2) div:nth-child(2) img{
width:80%;
border: 2rem solid black
}
<div class="upper">
<img src="https://pics.freeartbackgrounds.com/fullhd/Green_Grass_Background_Texture-682.jpg"/>
</div>
<div class="lower">
<section>
<img src="https://pics.freeartbackgrounds.com/fullhd/Green_Grass_Background_Texture-682.jpg"/>
</section>
<section>
<div><img src="https://pics.freeartbackgrounds.com/fullhd/Green_Grass_Background_Texture-682.jpg"/></div>
<div><img src="https://pics.freeartbackgrounds.com/fullhd/Green_Grass_Background_Texture-682.jpg"/></div>
</section>
<section>
<img src="https://pics.freeartbackgrounds.com/fullhd/Green_Grass_Background_Texture-682.jpg"/>
</section>
</div>
Here is a prototype of what I am trying to implement
Here is what I currently have : JsFiddle
I am trying to get the picture of the guy on the laptop to align correctly with and to the right of the paragraph components - Business Traveller, Office Supply Purchases, etc...
What I've tried is using Align attribute, changing my img src code to
<img id="laptop" align="middle" src="zoom-39988392-3.JPG" height = "90" width ="90" />
but that didn't have any effect.
I also tried Float but that messed up my margins and the organization of my left components.
Is there a way I can do this without floating?
See the fiddle
The HTML and CSS that i've used is as follows. Used float:left
HTML
<div class="container">
<div id="choices">
<p class="choice">Business Traveller</p>
<p class="choice">Office Supply Purchases</p>
<p class="choice">Stay at home parent</p>
<p class="choice">Entertainment</p>
<p class="choice">Profile 6</p>
</div>
<div class="image"></div>
</div>
CSS
html, body, .container {
height:100%;
}
#choices {
width:30%;
float:left;
}
.choice {
margin-top:0px;
margin-left:20px;
text-align:center;
width:100%;
background-image: url("http://i.imgur.com/H43sVoi.png");
padding-top:15px;
padding-bottom:15px;
}
.image {
height:100%;
width:65%;
background-color:red;
float:left;
}
You will have to work with the height and width of each divs. I just made it roughly.
You have to create two columns. 1 column for the menu and the second column for the image. If you do this, you wont have trouble floating.
i tried to make a custom navbar since the standart navbar isnt really what i desire. It looks too casual so i try instead of using for the navbar, images.
I cant get them 4 images to line up in a row.
I saw there are 2 types of making it, once is defining a class through CSS and the other one is directly in the index.html. Are there any difrences in those 2 methodes?
Help would be super appericated. I tried like 30 websites with parts of the code but it seems like nothing is working im wondering what i do wrong.
greeting Queen
.navbar {
max-width:960px;
text-align:center;
}
.home {
position:relative;
display: inline-block;
float:left;
padding:10px;
}
.search {
position:relative;
display: inline-block;
pading:10px;
}
.logo {
position:relative;
display: inline-block;
float:right;
margin-right:50%;
padding:10px;
}
.partner {
position:relative;
display: inline-block;
float:right;
margin-right:50%;
padding:10px;
<body>
<div class="navbar">
<div class="navbar-special">
<ul class="nav">
<li class="home"><img src="http://i.imgur.com/GryNQfZ.png" /></li>
<li class="search"><img src="http://i.imgur.com/NfURGQL.png" /></li>
<li class="logo"><img src="http://i.imgur.com/sIwbaop.png" /></li>
<li class="partner"><img src="http://i.imgur.com/Ry9hIzC.png" /></li>
</div> <!-- div closing navbar -->
</div><!-- div closing navbar -->
</body>
http://jsfiddle.net/n32koz7q/1/
As it applys to styling, there are a few caveats which make putting styles in an index.html or an external stylesheet different.
Putting styles in an external stylesheet will (everything else held constant)...
—create a new HTTP request, and the external style sheet will be loaded after the index.html page (given that this page requests the stylesheet).
—change the order at which styles are applied. For example, if you have.
index.html:
<html>
<head>
<link rel="stylesheet" type="text/css" href="mystyle.css">
</head>
<body>
hello world!
</body>
</html>
<style>
.body {color:black;}
</style>
and mystyle.css:
body {
color: white;
}
the body would have a css property of color:black, since that style was loaded last. You can read about this here.
There are a few other differences, but these are probably the ones that are particular to your current use case.
As for your original question: here is an updated fiddle:
http://jsfiddle.net/n32koz7q/2/
You had a lot of unnecessary styling. I would start here, and then build up. Basically, the most basic CSS that your are going to use to get elements to sit inline, in this case, will look like so:
.navbar {
max-width:960px;
text-align:center;
}
li {
display:inline-block;
padding: 10px;
}
Essentially you just want those li elements to sit inline.
Good luck!
Just add the following code:
.navbar-default {
background-color:red;
}
This should get you going.
Please see the code below, both image and text are located up in the div.
How to vertical align to the middle, both the image (div_a) and the text (div_txt) inside <a>, using pure css, and keep the div clickable (preferred solution with cross browsers compatibility):
<style type="text/css">
a.div_a {
display:block;
width:320px;
height:160px;
background-color:#CCC;}
</style>
<a href="www.mydoamin.com" class="div_a">
<img src="http://jsfiddle.net/img/logo.png" style="float:left; margin-right:10px; background-color:#666;" />
<span class="div_txt">Content</span>
</a>
I tried the following, but that didn’t help:
.div_txt {vertical-align:middle;}
I found separated solutions on the above for image/text, but not for both together.
Give display: table to your anchor element, and then wrap each your image and span in a .wrapper span with the following properties:
.wrapper {
display: table-cell;
vertical-align: middle;
}
HTML:
<a href="www.mydoamin.com" class="div_a">
<span class="wrapper">
<img src="http://jsfiddle.net/img/logo.png" style="background-color:#666;" />
</span>
<span class="wrapper">
<span class="div_txt">Content</span>
</span>
</a>
See DEMO.
Please note that this approach will not work in IE7, so if IE7 support is a requirement, you will have to use a more elaborate method.
Taken from Vertical-align image and altered slightly to account for <a> (jsFiddle demo):
Extra markup for link
a.absoluteCenterWrapper {
display:block;
}
CSS
.absoluteCenterWrapper {
position:relative; /* Contains the image in the div */
}
/* Positioning */
.absoluteCenter {
margin:auto; /* Required */
position:absolute; /* Required */
top:0;bottom:0; /* Aligns Vertically */
}
/* Sizing - resizes down to avoid cutting off */
.absoluteCenter { /* Fallback Sizing */
max-height:100%;
max-width:100%;
}
HTML
<a href="http://www.example.com/" class="absoluteCenterWrapper">
<img src="PATHTOIMAGE" class="absoluteCenter">
<p>Paragraph goes here.</p>
</a>
I am completely new to web design and I just cant seem to accomplish what is in the picture below. Even if you could tell me what this layout is called so I could google for suggestions it would be great
Thanks in advance
Well, you could start with a container div. Then add in a 'box' div with a set width. if you float those divs to the left they will align as such in the container. Then you can add the framework for the items inside the boxes.
#container {
width:500px;
background-color:#CCC;
}
.box {
width:50%;
float:left;
min-height:120px;
}
.boximg {
// this is your icon for each box
width:20px;
float:left;
display:inline;
}
.boxtitle {
font-weight:bold;
float:left;
display:inline;
}
Then your HTML:
<div id="container">
<div class="box">
<div class="boximg"><img src=""/></div>
<span class="boxtitle">Here is your box title</span>
<p>Your box text here</p>
</div>
<!-- add more boxes here -->
</div>
This is just a general hint. For nice grid based designs, you can google for css frameworks.
Here are some sample pages:
http://www.blueprintcss.org/tests/parts/sample.html
http://elasticss.com/demos/Examples_Columns.html
http://960.gs/demo_24_col.html
It's the Leverage theme from ThemeTrust.