I want to make a resume header just like this
Expected Output
I have tried this HTML code with less CSS to achieve this task
<!DOCTYPE html>
<html>
<head>
<title></title>
</head>
<body>
<h1 align="center">
<img src="http://gocartoonme.com/wp-content/uploads/cartoon-avatar.png"
width="10%" height="10%" align="middle">Sam<br clear="all">
</h1>
</body>
</html>
But I could not achieve that resume header.
The expected output would be a Resume header just like the image mentioned above
You can do it with CSS fairly easily, using properly structured HTML:
HTML:
<div id="bio-intro">
<div id="img-container">
<img src="" alt="treybake Frontend Developer" />
</div>
<div id="bio-info">
<h1>TreyBake</h1>
<h3>Frontend Developer</h3>
</div>
<div id="bio-contact">
<p>
e: someemail#domain.com <br/>
t: 0112233445566<br/>
w: domain.com
</p>
</div>
</div>
CSS:
#bio-intro {
background: lightgray;
width: 100%
}
#img-container, #bio-info, #bio-contact {
display: inline-block;
width: 33%
}
#img-container {
border: 1px solid;
border-radius: 100%;
max-width: 150px
}
We essentially break up each column into it's own container. We set these containers to a 1/3 of the parent width and set the display to inline-flex to make a row. Everything else is simple CSS to create a bordered image (no image, hence you see the ALT attribute value on the image - replace with an image and you'll see a much better result).
Working Example
I recommend flex-box.
You can assign "display:flex" to a element within which all your children are container, i.e., all the elements you are trying to align based on your requirements.
From there, flex-box provides numerous other features which you can explore here: https://css-tricks.com/snippets/css/a-guide-to-flexbox/
Flex-box not only easy to implement, but it is also responsive. This may not be too important in your specific case, but something additional benefit to keep in mind while styling elements.
<li class="flex-container">
<ul class="flex-item">Your image</ul>
<ul class="flex-item">Your Name/Title</ul>
<ul class="flex-item">Your contact</ul>
</li>
.flex-container {
display: flex;
justify-content: space-between;
}
https://jsfiddle.net/snehansh/fm3etpsu/5/
Related
I am in the process of making my own website, and I am making it out of pure HTML. I encountered in the making of the page, as I will describe below.
Here's my code for reference :-
<head>
<style>
img {
display: block;
margin-left: auto;
margin-right: auto;
}
</style>
<style>
.sideDiv {
border: 1px outset black;
background-color: white;
text-align: center;
width: 120;
height: 400;
}
</style>
<style>
.mainDiv {
border: 1px outset black;
background-color: white;
text-align: left;
width: 400;
height: 300;
}
</style>
<img src="AyushLogo.png" alt="logo" height="9.2%" width="9.2%" style="float:left">
<br>
<a><button>About Me</button></a>
<a><button>Games</button></a>
<a><button>My Blog</button></a> <br><br>
<hr>
</head>
<body>
<div class="sideDiv">
</div>
<div class="mainDiv">
<p>Hi,<br>My name is Ayush Bhatt.<br><br>I love to code and remake old games. You can view some of my games by clicking on the 'Games' button on the top bar.</p>
</div>
</body>
</html>
The output looks like this :-
I wanted the tag with the "mainDiv" properties to appear at the side of the one with the "sideDiv" properties, but it just doesn't want to.
PS : I want to use only HTML as long as possible
An important thing about <div> tags is that they are known as "block-level" elements, which in particular means that they always start on a new line and take up the full width available, regardless. With this in mind,
writing
<div class="sideDiv"></div>
<div class="mainDiv">
...
</div>
should result in a div with class sideDiv and width as defined in the class, and then a new div with class mainDiv started on a new line, as block-level elements do by default, though note that this is simultaneously also because the div with class sideDiv takes up the remaining width on the page as a block-level element (though its content width is as described in the class, it being a block-level element is a bit like it "reserving" the rest of the width even though its content only uses the amount defined), so the next element (block level or inline) can only start on at least the next line.
If you want to circumvent this behavior, there are many ways to do it. One is by using an external tool like bootstrap, as pointed out by another answer, but my favorite is to simply use flex box. This can be done for your code in this way
<div style="display: flex; flex-direction: row;">
<div class="sideDiv"></div>
<div class="mainDiv">
...
</div>
</div>
A method that directly overwrites the block-level property would be to set the style display: inline-block; for both divs, to prevent either from starting on a new line or taking up the whole available width by default. (Just one isn't enough, if you only set it on the first one, the second still starts on a new line by default, and if you only set it for the second one, the first still takes up all available width by default). However, this causes the element to be treated completely as an inline element besides the fact that block-level height and width can be applied, and can be strange/difficult to maneuver as a result. It is often easier to just use a flex box. Code for this would be
<div class="sideDiv" style="display: inline-block;"></div>
<div class="mainDiv" style="display: inline-block;">
...
</div>
However, note that <p> is also a block-level element, so directly substituting in your original code in the mainDiv div would still cause it to skip a line before displaying. Again, it is usually easier, more modern, and better looking to just use a flex box.
Edit: Added the detail about block-level elements taking up all available width, and fixed the incorrect initial method that changed the display property to overwrite the block-level property by setting display: inline;. This can work, but it will ignore the heights and widths of the <div>s.
try using bootstrap , it deals with layout perfectly , here is an example :
<div class="container">
<div class="row">
<div class="col-md-6">
this is the left section
</div>
<div class="col-md-6">
this is the right section
</div>
</div>
</div>
for more details check :
https://getbootstrap.com/docs/5.0/layout/grid/
NOTE : you will need to include bootstrap and jQuery libs , check for online tutorial to start using bootstrap
Hi all I think this should be a relatively quick question but since I am a beginner to HTML and CSS I can't seem to figure this out.
I have the following CSS code:
<style>
div.specialspecial {
width: 100%;
height: 0;
padding-bottom: 56%;
position: relative;
margin-left: 160px;
}
iframe {
width: 90%;
height: 100%;
position: absolute;
display: block;
}
</style>
And this html code:
<div class="specialspecial">
<iframe src='dirToLocalHTML' id = 'bg'></iframe>
</div>
It seems that the margin-left set in the div class (which I need as I am using a sidebar on this website) makes it so the content inside the iframe is off center (presumably by 160px). Is there a way for me to use CSS to easily fix this? Or will I need to resort to JavaScript to resize the frame? I am comfortable with learning either approach.
Edit:
Apologies for not providing enough information. Hopefully adding this will help:
This is the body of my html:
<body>
<div class="w3-sidebar w3-bar-block w3-light-grey w3-card-2" style="width:160px;">
<button class="w3-button w3-block w3-left-align" onclick="myAccFunc('demoAcc')">
Accordion <i class="fa fa-caret-down"></i>
</button>
<div id="demoAcc" class="w3-hide w3-white w3-card-2">
Link
Link
</div>
</div>
<div class="specialspecial">
<iframe src='dirToLocalHTML' id = 'bg'></iframe>
</div>
</body>
This code is mainly taken from the example of: https://www.w3schools.com/w3css/tryit.asp?filename=tryw3css_sidebar_accordion
As I am trying to get a similar style for my webpage
I think the best fix is to simply create a container for the iframe that isolates it from the element with the large margin:
<div class="specialspecial">
<div class="pageContent">
<iframe src='dirToLocalHTML' id = 'bg'></iframe>
</div>
</div>
Even with no additional CSS, this should restrain the size of the iframe, which will get its size from the element without the large margin.
It's worth noting that layouts like that, which rely on large margins for side content, are somewhat archaic. Each part of the document should be contained in an element that doesn't care what's happening around it.
<style>
.page-container > * {
display: inline-block;
}
.page-sidebar {
width: 160px;
}
<div class="page-container">
<nav class="page-sidebar"></nav>
<main class="page-content"></main>
<div>
See also: http://www.developer.com/lang/understanding-the-proper-way-to-lay-out-a-page-with-html5.html
I've seen some other posts on this but even using their method on my code doesn't seem to be working for me. What am I doing wrong when trying to center these divs?
This example works fine for me (taken from another SO post).
But this one (which is my code) doesn't behave the same and isn't centered properly.
here is my code that is also in my JSFiddle
.pdf-pageimage-container {
display: block;
margin: 0px auto;
border: 1px solid #EEE;
}
<div class="pdf-pageimage-container" style="position:relative;width:612px;height:792px;">
<img style="width:612px;height:792px;" />
<div>
<div class="pdf-pageimage-container" style="position:relative;width:792px;height:612px;">
<img style="width:792px;height:612px;" />
<div>
<div class="pdf-pageimage-container" style="position:relative;width:612px;height:792px;">
<img style="width:612px;height:792px;" />
<div>
<div class="pdf-pageimage-container" style="position:relative;width:792px;height:612px;">
<img style="width:792px;height:612px;" />
<div>
<div class="pdf-pageimage-container" style="position:relative;width:612px;height:792px;">
<img style="width:612px;height:792px;" />
<div>
<div class="pdf-pageimage-container" style="position:relative;width:812px;height:792px;">
<img style="width:812px;height:792px;" />
<div>
you are not ending div tags.
<img>
can work without "/"
and to align horizontally in center use
<div align="center" class="pdf-pageimage-container" style="position:relative;width:792px;height:612px;"></div>
Your HTML is incorrect. You are opening <div> tags but not closing them with </div>, so you are opening lots of nesting div elements.
You can place them in a wrapper div with a fixed width and then center each of them with auto margin.
Let's say that the wrapper has an ID wrapper and the sub-elements all have the class child. In that case you can for example set the following in your CSS
#wrapper{
width: 800px;
}
.child{
margin: 0 auto;
}
First off I would close the endings of the "div" tags like so just to stay valid with your code.
I'll assume that these divs will stack on top of each other so add this to your "pdf-pageimage-container" css class:
.pdf-pageimage-container {
clear : both;
}
If you want the divs to float next to each other one after another you could use this instead
.pdf-pageimage-container {
float : left;
}
Hope this helps.
I'm using the following code in body section.
<center>Get Started</center>
Is there any alternative for <center> tag?
How can I make it center without using <center> tag?
Add text-align:center;display:block; to the css class. Better than setting a style on the controls themselves. If you want to change it you do so in one place.
You can do this:
<div style="text-align: center">
Get Started
</div>
You can use css like below;
Get Started
You can put in in a paragraph
<p style="text-align:center;">Get Started</p>
To align a div in the center, you have to do 2 things:
- Make the div a fixed width
- Set the left and right margin properties variable
<div class="container">
<div style="width:100px; margin:0 auto;">
<span>a centered div</span>
</div>
</div>
I don't know why but for me text-align:center; only works with:
text-align: grid;
OR
display: inline-grid;
I checked and no one style is overriding.
My structure:
<ul>
<li>
<a>ElementToCenter</a>
</li>
</ul>
You can use the code below:
a {
display: block;
width: 113px;
margin: auto;
}
By setting, in my case, the link to display:block, it is easier
to position the link.
This works the same when you use a <div> tag/class.
You can pick any width you want.
<!DOCTYPE html>
<html>
<head>
<meta charset="ISO-8859-1">
</head>
<body>
<h4 align="center">
Center
</h4>
</body>
</html>
There's also a handy tag... whatever you put in between, gets centered.
Like so:
<center>
<a href..... whatever>
</center>
you can try this
display inline-block to make it fit width,
margin-left to make it move 50% away from left,
and transform translateX to make it center his position
display: inline-block;
margin-left: 50%;
transform: translateX(-50%);
In your html file:
Get Started
In your css file:
.hpbottom{
text-align: center;
}
I'd like to be able to position an image (blue) so that what ever size it is, it is always centered relative to the baseline of the div behind (red, not the containing div). The div behind will always be the same size/position.
Preferably this would be using css only as I'm using drupal and I don't know much about editing beyond the tpl files.
Thanks!
EDIT: Here's the layout http://pastebin.com/SisQHM4y
Hi you can do this pure css as like this
css
.wraptocenter {
display: table-cell;
text-align: center;
vertical-align: middle;
width: 500px;
height: 400px;
background:green;
}
HTML
<div class="wraptocenter"><img src="//?" alt="images" /></div>
Live demo http://jsfiddle.net/rohitazad/tvrMp/
More information about this http://www.brunildo.org/test/img_center.html
Perhaps something like this:
<style>
#blue { margin-left:auto;margin-right:auto; }
</style>
<div id="red">
<div id="blue">
<img src="?" id="myImg" />
</div>
</div>
EDIT
I see, so you wish to center the x-axis horizontally, not vertically. And that link is a little messy. Perhaps you could try to
<style>
.user-picture { margin-top: auto; margin-bottom: auto; }
</style>
<div class="content">
<div class="profile" typeof="sioc:UserAccount" about="/users/diver1">
<div class="user-picture">
<a href="/users/diver1" title="View user profile." class="active">
<img typeof="foaf:Image" src="http://waterworksworldwide.com/sites/default/files/pictures/picture-126-1333572014.gif" alt="Diver1's picture" title="Diver1's picture" />
</a>
</div>
</div>
I am still having a little bit of a hard time seeing where the overlap between areas is as suggested by the red and blue in the question. If there is no overlap with my suggestion then please let me know and perhaps we can try to use some variations with position: absolute;