I'm new to HTML and working on a website where I need this text box to appear in the center as it looks rather odd on the left hand side (please help me make edits to the html as well:
<!-- Job Opportunities -->
<div class="wrapper wrapper-style3">
<article id="careers">
<header>
<h2>Careers</h2>
</header>
<div class="container">
<div class="row">
<div class="12u"></div>
</div>
<div class="row">
<div class="4u">
<article class="box box-style2">
<h3>Work With Us</h3>
<p>We are looking for enthusiastic, detail-orientated professionals to assist in our continued growth. As a small firm, we reward flexibility with excellent conditions and an enjoyable working environment. Rapid career progression is possible for candidates demonstrating the right characteristics. Please contact us, enclosing a CV, for details of our current vacancies.</p>
</div>
</div>
</article>
</div>
Create css class in <head>'s <style> element:
.centered { width:70%; margin: 0 auto; }
Add css class to div:
<!-- Job Opportunities -->
<div class="wrapper wrapper-style3 centered">
<article id="careers">
<header>
<h2>Careers</h2>
</header>
<div class="container">
<div class="row">
<div class="12u"></div>
</div>
<div class="row">
<div class="4u">
<article class="box box-style2">
<h3>Work With Us</h3>
<p>We are looking for enthusiastic, detail-orientated professionals to assist in our continued growth. As a small firm, we reward flexibility with excellent conditions and an enjoyable working environment. Rapid career progression is possible for candidates demonstrating the right characteristics. Please contact us, enclosing a CV, for details of our current vacancies.</p>
</article>
</div>
</div>
</div>
</article>
</div>
JsFiddle: http://jsfiddle.net/3Ly1s3tv/
Related
I have the one issue with hr tags. There're two hrs in my html below which is decorated using CSS border. When I run the code the first one shows up as I intended nut the second one doesn't, even though they share the same CSS. How should I do???
Here's my code:
hr {
border: none;
border-top: 5px dotted #EAF6F6;
width: 5%;
margin-top: 50px;
margin-bottom: 50px;
}
<div class="middle-container">
<div class="profile">
<img src="resources/profile.png" alt="peofile-picture">
<h2>Hello.</h2>
<p>Learning web development skills. Just a drunk girl who's longing for Britain.</p>
</div>
<hr>
<div class="skills">
<h2>My Skills.</h2>
<div class="skill-row">
<img src="resources/coding.png" class="code-img" alt="coding">
<h3>WEB designing</h3>
<p>Please remember, I AM really a NEWBIE when it comes to designing the website.</p>
</div>
<div class="skill-row">
<img src="resources/beer.png" class="beer-img" alt="beer">
<h3>Drinking. Yes, JUST a drinking.</h3>
<p class="drink">Having good meal is pleasure. When it comes with good drink, that's far more better.</p>
</div>
</div>
<hr>
<div class="contact-me">
<h2>Get In Touch</h2>
<h3>But if you're interested in me...</h3>
<p>Please feel free to contact, there might be any help I can provide.</p>
<a class="btn" href="mailto:fictional#gmail.com">CONTACT ME</a>
</div>
</div>
I think you forgot an hr in your HTML, just check the picture below to understand :
As the title says, how do I center two divs next to each other perfectly?
My HTML: (or well, a bit of it)
<section class="team" id="team">
<div class="container">
<h3>The team behind CatCraft</h3>
<div class="divider">
<div class="hr">
<div class="hr-dot"></div>
</div>
</div>
<div class="row row-centered">
<div class="team-centered col-md-4">
<img src="http://cravatar.eu/helmhead/6a940db5e02d4bf79db9203a8b126f0d/140.png" alt="catx">
<h4 class="bold">CatX (Owner)</h4>
<p>Hi! I'm CatX and I'm the owner of CatCraft. I like anime and tech stuff. My favourite server is bending. =^_^=</p>
</div>
<div class="team-centered col-md-4">
<img src="http://cravatar.eu/helmhead/ef4fbdb6d629480d8f98ed9919c111e9/140.png" alt="__ast__">
<h4 class="bold">__Ast__ (Co-Owner)</h4>
<p>Example text, pls write something ;-;</p>
</div>
</div>
</div>
</section>
My CSS: (same here, this isn't all)
I tried to make a box for the css above too but it didn't work. http://pastebin.com/SzhAmh3f
Basically the problem I'm having is that the code above works kind of but one of the blocks are a little bit lower than the other and i have no idea why.
Yes, I know that there are other posts about this subject but no one worked for me so I decided to open my own.
There are a lot of unwanted styles actually to achieve this, you simply need the below code on your team-centered class. Remove row-centered class. It should look like this
CSS
.team img {
width: 140px;
height: 140px;
border-radius: 50%;
margin: 10px auto 40px;
}
.team-centered {
width: 50%;
float:left;
text-align: center;
}
HTML
<section class="team" id="team">
<div class="container">
<h3>The team behind CatCraft</h3>
<div class="divider">
<div class="hr">
<div class="hr-dot"></div>
</div>
</div>
<div class="row">
<div class="team-centered">
<img src="http://cravatar.eu/helmhead/6a940db5e02d4bf79db9203a8b126f0d/140.png" alt="catx">
<h4 class="bold">CatX (Owner)</h4>
<p>Hi! I'm CatX and I'm the owner of CatCraft. I like anime and tech stuff. My favourite server is bending. =^_^=</p>
</div>
<div class="team-centered">
<img src="http://cravatar.eu/helmhead/ef4fbdb6d629480d8f98ed9919c111e9/140.png" alt="__ast__">
<h4 class="bold">__Ast__ (Co-Owner)</h4>
<p>Example text, pls write something ;-;</p>
</div>
</div>
</div>
</section>
For some reason my BS columns don't seem to be stacking horizontally in my fiddle, only on top of each other :-
<!DOCTYPE html>
<html>
<head>
<title>Sue Let The Dogs Out</title>
<script type="text/css" src=""></script>
</head>
<body>
<div class="header">
<div class="row">
<div class="container">
<h1>
Sue Let The Dogs Out!
</h1>
<ul class="nav">
<li>About</li>
<li>Services</li>
<li>Testimonials</li>
<li>Contact Us</li>
</ul>
</div>
</div>
</div>
<div class="jumbotron">
<div class="container">
<div class="row">
<h2> Bespoke Pet Services</h2>
</div>
<div class="row">
<h4>Around the Bristol Area</h4>
</div>
</div>
</div>
<div class="supporter">
<div class="container">
<div class="row">
<div class="col-md-4">
<h3>Dog Walking</h3>
<p>We offer one hour dog walks individually or in a group at extremely competitive rates. The walks take place in safe, traffic free, varied environments such as riverside walks, woodlands and parks. We are happy to deal with all dogs, from the
smallest through to giant breeds.</p>
</div>
<div class="col-md-4">
<h3>House Sitting</h3>
<p>We offer overnight pet sitting in the client's home. This unique service is ideal for pet owners who, for example, want a few days or weeks' holiday but are reluctant to kennel board. The majority of cats and dogs, particularly dogs, suffer
anxiety, stress and depression due to unfamilar surroundings, lack of exercise, stimulation and human companionship.</p>
</div>
<div class="col-md-4">
<h3>Pet Sitting</h3>
<p>We are able to arrange to visit your pet during the day to feed and water them - this can be ideal if you are a cat owner needing to be away for a few days but wishing to avoid the disruption of putting your cat in a cattery, for example.</p>
</div>
</div>
</div>
</div>
<div class="footer">
<div class="container">
<div class="row">
<div class="col-md-8">
<h4>© Rebecca Townsend Design</h4>
</div>
<div class="col-md-4">
<h4>Contact Us</h4>
</div>
</div>
</div>
</div>
</body>
</html>
Could you suggest how I would fix this? I'm pretty new to coding so there will be a lot of mistakes within my code. Please feel free to give me some pointers!
You need to actually include the Bootstrap files in your HTML somehow. You can use this link or download them and insert them into your project locally.
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous"
You need to include the Bootstrap CSS library in order for the Bootstrap classes to do what you expect them too.
You can use a CDN like so:
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
I have design which needs and image and text align next to each other in div(using col-md-6)i need height image to be resize wrt text div.on tablet and mobile it has be 12 column layout
Here is my html code
<div class="row fixed-height">
<div class="col-md-6 full-screen-col img-head"></div><!--col for imag row ends here-->
<div class="col-md-6 cont-bg full-screen-col">
<div class="description_container">
<h1>JOIN OUR TEAM</h1>
<p>We except a lot from our team members, and we give a lot in return- like ongoing training, professional growth
opportunities and competitive benefits. if Gaspar's sounds like your kind of workplace, we'd love to hear from you</p>
</div>
</div><!--container for text details-->
</div><!--row fors slide container -->
Here is css used.
.fixed-height{
height: 300px;
overflow-y: hidden;
}
.img-head{
background-image: url(../images/Gaspars-Construction-Employee-Photo-1024x683.jpg);
background-size: cover;
height: 100%;
}
Little help is much appreciated. Thanks in advance
Add this,
<div class="row fixed-height">
<div class="col-md-6 col-sm-6 full-screen-col img-head"></div><!--col for imag row ends here-->
<div class="col-md-6 col-sm-6 cont-bg full-screen-col">
<div class="description_container">
<h1>JOIN OUR TEAM</h1>
<p>We except a lot from our team members, and we give a lot in return- like ongoing training, professional growth
opportunities and competitive benefits. if Gaspar's sounds like your kind of workplace, we'd love to hear from you</p>
</div>
</div><!--container for text details-->
</div><!--row fors slide container -->
This should work:
HTML
<div class="row fixed-height">
<div class="col-md-6 full-screen-col img-head">
<img src="https://dncache-mauganscorp.netdna-ssl.com/thumbseg/308/308116-bigthumbnail.jpg"/>
</div><!--col for imag row ends here-->
<div class="col-md-6 cont-bg full-screen-col">
<div class="description_container">
<h1>JOIN OUR TEAM</h1>
<p>We except a lot from our team members, and we give a lot in return- like ongoing training, professional growth opportunities and competitive benefits. if Gaspar's sounds like your kind of workplace, we'd love to hear from you</p>
</div>
</div><!--container for text details-->
</div><!--row fors slide container -->
CSS
.img-head{
float: left;
}
Ok so I have the following HTML
<div class="container">
<div class="row col-sm-12" id="productBrief">
<div id="RaspberryAndChocolate" style="display:none; height:200px;">
<div class="col-sm-6 text-center">
<img src="~/Content/Images/YogurtImages_404x290/Rasberry_White_Chocolate_Yogurt.png" class="img-responsive" style="margin: 0 auto; padding-top: 5%" alt="Rasberry White Chocolate Yogurt" />
</div>
<div class="col-sm-6">
<h2 class="raspberryRed productLineHeight">FLAVOUR #3</h2>
<h1 class="raspberryRed">
RASPBERRY &<br /> WHITE CHOCOLATE
</h1>
<p class="productPara">
A decadent combination of whole raspberries and smooth white chocolate that you will want to make last as long as possible. Teaspoon recommended.
</p>
<p>
<span class="label label-danone label-as-badge" style="font-size: 0.9em; padding:3%">VIEW ALL FLAVOURS</span>
</p>
</div>
</div>
<div class="clearfix"></div>
<div id="BlueBerry" style="display:none; height:200px;">
<div class="col-sm-6 text-center">
<img src="~/Content/Images/YogurtImages_404x290/Blueberry_Yogurt.png" class="img-responsive" style="margin: 0 auto; padding-top: 5%" alt="Blueberry Yogurt" />
</div>
<div class="col-sm-6">
<h2 class="blueBerry productLineHeight">FLAVOUR #6</h2>
<h1 class="blueBerry">
BLUEBERRY
</h1>
<p class="productPara">
Just imagine plump and juicy blueberries immersed in a deliciously creamy yoghurt. Enough said.
</p>
<p>
<span class="label label-as-badge" style="font-size: 0.9em; padding:3%">VIEW ALL FLAVOURS</span>
</p>
</div>
</div>
<div class="clearfix"></div>
</div>
<div class="clearfix"></div>
<div class="row">
<div class="col-lg-12 text-center">
<div class="col-lg-2"></div>
<p style="width:70%;" class="text-center col-lg-8">
Experiencing Ultimate's uniquely luscious texture for the first time is beyond words. So don't even try. Take a moment to enjoy the ultra creaminess, the juicy ripened fruits and an array of wicked indulgences that come together to create a yoghurt like no other.
</p>
<div class="col-lg-2"></div>
</div>
</div>
Now there are roughly about 8 different divs but for simplicity I am only showing 2, but only one div is shown look at it as a random affect so the user refreshes the page a different div is shown (this is done in jquery) but if you look at the bottom of the HTML you will see another row with a P tag this is what is causing he issue, when displayed on a desktop it shows like this
when I minimize the browser the text at the bottom of the image displays under the text located to the right hand side of the yogurt box as shown here.
I have added the clearfix, tried adding a new container and yet the problem still remains....
You are using invalid bootstrap grid. Col should be a child of row. Use correct grid and everything will work perfectly.
Scott, hunzaboy says you need to use the dive like this
<div class="row">
<div class="col-sm-12"></div>
</div>
I don't fully understand your question, but hope you asking this,
when re-sizing your first image, I will suitably re-size without any harm to other divs. For that You need to devide that into 3 main divs, check the below code
<div class="row">
<div class="col-md-6">This is the image holding div</div><div class="col-md-6"> this is the right side text "Flavour #6, etc..."</div>
<div class="col-md-12">This is the text on the bottom</div>
</div>
I will look, 2 columns on the top and one column in the bottom.
For mobile view, you can use col-xs-12class, the it will show as stack.
Hope this is you asking. Thanks