Closed. This question needs to be more focused. It is not currently accepting answers.
Want to improve this question? Update the question so it focuses on one problem only by editing this post.
Closed 4 years ago.
Improve this question
So I have already got my mobile version of my website laid out (see sketch below)
but now I am having trouble trying to achieve my envision goal for my desktop version. I did a quick sketch on paint to give you guys an idea of what I have so far.
The problem is though I want to keep my picture and textbox next to each other in the middle of the entire website. The paragraph and footer I can do myself. Is just I don't know what is the best solution to do to have my picture on the left side and the text on the right side while I can keep everything else on the bottom and do whatever I want there.
I want the picture (left side) and text (right side) to be like in the middle of the page.
put your picture and text in a div respectively and give that div below css
.parent{
display:flex;
justify-content:center;
flex-wrap:wrap;
}
.parent div{
height:200px;
width:300px;}
.img img{
width:100%;
height:100%;
}
<div class="parent">
<div class="image">
<img src="https://cdn.colorlib.com/shapely/wp-content/uploads/sites/12/2016/03/photo-1447834353189-91c48abf20e1-1-1.jpg"
alt="">
</div>
<div class="text">
<h2>About Us</h2>
<p>Usage of the Internet is becoming more common due to rapid advancement of technology and the power of
globalization. Societies are becoming more inter-connected. Thoughts from different</p>
READ MORE
</div>
</div>
}
Related
Closed. This question is opinion-based. It is not currently accepting answers.
Want to improve this question? Update the question so it can be answered with facts and citations by editing this post.
Closed 8 months ago.
Improve this question
I am currently making a page with flexboxes, and when it comes to adding text areas, I wonder if I should make a new container for each text area or is it not the way to do ?
Let's say I have the following code for my page:
<div class="flex-container">
</div>
Should I do this :
<div class="flex-container">
<div class="containertextarea1">
<p> text area 1 </p>
</div>
<div class="containertextarea2">
<p> text area 2 </p>
</div>
<div class="containertextarea3">
<p> text area 3 </p>
</div>
</div>
Or something else?
Thank you
If you need columns in your flex-container you can use flexbox. I mean something like this. from your code I think you can use directly in flexbox. that will reduce DOM size.
Here is the CSSTrix Link for a better understanding of FlexBox
As we know flexbox is a one-dimensional layout model, then until and unless you don't want these text areas to be spread in two dimensions(like in both column and row) then I think putting all text areas in one container is fine.
Closed. This question needs to be more focused. It is not currently accepting answers.
Want to improve this question? Update the question so it focuses on one problem only by editing this post.
Closed 6 years ago.
Improve this question
I am converting an Illustrator design into HTML and CSS using Bootstrap framework. I am stuck on the part of design shown below:
I want the text surrounded by image as shown above.I can have these images separately and also one single image as I can export these from Illustrator according to the requirements. I can also export SVG image if required.What would be the best approach to achieve this task.
Using CSS, you can display the image as a background-image of a <div> and tailor the positioning of the heading and title within the same <div>.
Markup:
<div>
<h2>We Only Work With the Best</h2>
<p>We screen our coders' social profiles like LinkedIn, GitHub and StackOverflow. After that, we only expose them to smaller tasks until they build up their reputation.</p>
</div>
Styles:
div {
text-align: center;
background-image: url('/work-with-the-best.png') no-repeat;
}
div h2 {
margin-top: 200px;
}
Maybe position the text with relative and add a z-index to have it above the image.
Closed. This question needs debugging details. It is not currently accepting answers.
Edit the question to include desired behavior, a specific problem or error, and the shortest code necessary to reproduce the problem. This will help others answer the question.
Closed 7 years ago.
Improve this question
Im looking for an easy fix to align footer elements on the same 'line', consider this image:
Although one could argue the elments are linedup it is messy in that im using negative margins, and tables and floats.
Is there a better / easy way to achieve this, WITHOUT having to create extra elements inside footer
How about using a positive margin and divs? Play around with the margin to get it as centered as you want.
<footer style="background-color: lime; border:1px solid red; float:left; width:100%;">
<div style="float:left;">
Foo
<br/>Bar
</div>
<div style="margin-left:50%; float:left; text-align:left;">
Swiggity swooty
<br/>Bring
<br/>Me
<br/>That
<br/>Booty
</div>
<div style="float:right;">
Blah Blah Blajh
</div>
</footer>
Closed. This question needs to be more focused. It is not currently accepting answers.
Want to improve this question? Update the question so it focuses on one problem only by editing this post.
Closed 8 years ago.
Improve this question
I apologise in advance if this is a really obvious and noobish question, but how do i segment a web page into multiple portions, with each portion of the webpage filling the screen in it's entirety?
A good example of what i wish to do would be similar to treehouse's homepage when i segment the webpage into multiple portions e.g "home","about us", etc.. I've tried right clicking on the webpage and having a look through the css but did not see height and/or width applied to anything on the page.
How exactly does treehouse, and others segment their webpages?Do they simply make use of a background image or is there some other method of doing so?
When you give the html, body elements a the css property's:
html, body {
height: 100%;
width: 100%;
}
And in your html you makke a couple of div's like this:
<div class="fitScreen">
content 1
</div>
<div class="fitScreen" style="background-color: red">
content 2
</div>
<div class="fitScreen" style="background-color: blue">
content 3
</div>
<div class="fitScreen" style="background-color: yellow">
content 4
</div>
And you give them a css property of height: 100%; They fill the whole screen.
Demo here
EDIT:
Or if you just want 1 element that fills the screen, and all that is beneath that element has a height of auto, just just give make one div with the class of fitScreen.
And beneath that another element with your own content.
Closed. This question needs to be more focused. It is not currently accepting answers.
Want to improve this question? Update the question so it focuses on one problem only by editing this post.
Closed 8 years ago.
Improve this question
I am trying to set positions of forms. My teacher says this can be achieved using <Frameset> tag but this tag creates borders between the two frames and I don't want those borders. I have basically have 2 forms , one contains basic text and the other one contains some images. I want both these forms to display side by side not one below the other. Is there any way to achieve this?? please help.
Here you go
http://fiddle.jshell.net/FBXZC/
HTML
<div class="wrapper">
<div class="halfwidth">
I am One Half
</div>
<div class="halfwidth">
<img src="http://www.metal4.de/wp-content/uploads/2012/09/steel-panther.jpg" alt="">
</div>
</div>
CSS
.halfwidth {
display: block;
width: 50%;
float: left;
}
PS: get yourself a new teacher or go complain about him, he obv. has no idea of anything.
You can use css to style forms.
try this fiddle for the sake of demo.
form
{
background-color: red;
}
Welcome to SO and I'm glad to see a new student in web development. I don't want to go against your teacher, for he/she is probably teaching you the behaviors of frameset, but frameset is not the best way.
This is what you should do :
<div class="wrapper">
<div class="left-side"></div>
<div class="right-side"></div>
</div>
DEMO
I suggest you to use Dreamweaver to give you the exact position for each element. In general tags define the positions.