I'm making a friends list script for an online browser game I play. I have 4 divs I need within the wrapper: 1) List of friends, 2) Add Friend, 3) Friend requests, 4) Chat. I figured out how to get the first two, but I need advice adding the rest. Here's what I have so far and what I want to add:
What would be the best way to add the two divs on the right? Should I make some sort of table of the 4 divs?
My css for the two divs both look something like this:
position: relative;
width: 40%;
height: 70%;
top: 5%;
left: 2%;
border: 1px solid blue;
If anyone can give me insight on a good way to accomplish this setup I'd greatly appreciate it. Here's a fiddle of the basic outline I have so far: https://jsfiddle.net/kfupd6hb/1/
You can use float:left; attribute of css.
I've updated ur fiddle..
Somehow i'm unable to create a link here that's why providing link in comment.
I suggest using display:inline-block; to get the <div>'s side by side, you can make a really perfect grid with that property.
Related
I searched the forum for a similar CSS issue but my keywords didn't really help. I apologize if this has been asked elsewhere but I couldn't find it.
So, to be brief, I'm new to website design and am trying to build a site for a friend. I have an idea laid out and am putting it together bit by bit, but I ran into a strange issue. It's difficult to explain so I'll post two links and explain the difference between the two:
Link1 and
Link2
The problem I'm having should be clear if you look at the two sites. Basically, I have a "content" section that seems to have some invisible tag invading it for the first two lines. The only difference between the two references above is that on the first, I put a < p > tag in the "content" section, and on the second, I put two line breaks and then the < p > tag. The fact that the text wraps when there are two line breaks but not otherwise suggests to me that there is some DOM element invading the "content" div's space, but I have used every browsers' "inspect" tool and cannot find the culprit. If anybody can assist me, I'd greatly appreciate it. Thank you!
I looked at your code and it needs some rethinking and restructuring. Your use of css positions is not appropriate. Please dig deep into positioning and floats to understand better on how to structure your containers.
To fix your issue, you can add clear: both on #content
#content{clear:both;}
In first link (without line breaks, remove top:25px add overfolw:auto)
#content {
background: white;
position: relative;
width: 100%;
height: 550px;
margin: auto;
opacity: 0;
overflow: auto;
}
Going straight to the point, I'm a beginner in CSS. I found twitter bootstrap that seems very promissing and easy to use... well, not so.
Take a look please at this.
I need to:
1) place the logo (with an X) inside the square that it's now below it
2) add some margin from the top. Right now, there is almost no space between the browser url bar and the logo/fields
3) add some spaces between the input fields when they are horizontal, eg. fields: "Seu Número de Celular:", "Boleto Bancario" and "Conta de Consumo". Right now, they are almost glued one to the other.
I would also appreciate any good advices on tutorials on CSS. I'm using django, if this matters.
Thanks for your help
W3C Schools is a good point to start with CSS.
1) Learn about position:relative or use background and place the box as background-url
.your-square-image /*You will need to put class="your-square-image" to the squarebox*/
{
position: relative;
top: -120px;
z-index: -1;
}
2) Simply use margin-top to adjust the margin from top
.logo {
margin-top: 50px;
}
3) Use margin-right for all your inputs (or put it in proper class)
input
{
margin-right: 15px;
}
All the css above can be placed at the top of your html page or put in separate css file and link it from your page (recommended).
I designed the layout for my personal website. I designed lines as separators. In the layout I made two lines side by side. One is dark and one white so I've created a nice effect which I want to create by code using CSS3 without include any images.
I've attached two images to see the lines that I'm talking about.
Thanks a lot for your time guys.
Cheers!
It's quite hard to see exactly what you mean from the screenshots -- I assume the shiny circles are your way of highlighting the bit you want to show us, but actually they make it harder make out the images properly, and they're quite low-res anyway which doesn't help. But I'll try to help anyway.
What you're asking for is fairly common. Typically you'd use CSS borders for this kind of thing.
Something like this:
border-left: 2px groove black; height: 50px; width: 2px;
This is all standard CSS; you don't need any CSS3 trickery here.
try
div {
width:50px;
border-right:1px solid black;
box-shadow: rgba(255,255,255,0.8) 1px 0px 0px;
}
I have slightly different approach. See this previous post:
Two color borders
Here's an example for you: http://dabblet.com/gist/2416433
I'm making a responsive website at the moment and im trying to work up my CSS at the moment. One thing ive noticed is a lot of sites ive looked at use:
cf:before, .cf:after {
content: " ";
display: block;
height: 0;
min-height: 0 !important;
visibility: hidden;
}
And all their elements in the responsive site use an extra class of cf which im guessing stands for clear float, even though the elements as far as i can see are not floated? Can anyone help me understand why they are being used. For instance: http://www.londonandpartners.com/
Thanks
M
There are two things you have to know about cf (clearfix) :
Clearfix Meaning and why do we use it
Clearfix Reloaded cf:before / cf:after
I think it is the best way to know why do we use it.
I gave up on using CSS for form styling when I hit snags like requiring 3 textboxes adjacent to one another (like a phone number) or a dropdown list next to a textbox. I just couldn't come up with a reliable way to style it without good ol' TABLES.
I'm thinking about going back to CSS for form styling; I don't know:
Whether it's more usable to have captions on top or on the left of the field.
How to style the things so they place nicely even with a couple of adjacent form elements.
References? Is this still a pipe dream?
You mean like this?
Basically we create a pseudotable
.mxrow {
clear: both;
width: 100%;
height: 50px;
}
.mxcell {
float: left;
padding-top: 10px;
padding-bottom: 10px;
height: 26px;
}
.mxcell_firstcell{
width: 25%;
}
And the markup would be
<div class = "mxrow">
<div class = "mxcell mxcell_firstcell"><input element /></div>
<div class = "mxcell mxcell_secondcell"><another form element/></div>
</div>
The individual cell classnames serve to apply specific css (my markup is a grid)
There are a couple of CSS templates designed specifically for laying out forms.
vessess.com
Uni-form
I hope this helps point you in a productive and awesome direction. Take care.
No, it is very possible, and I (and many others) have been doing it for years.
Look at float: (left|right) and display: (inline|inline-block).
Other people give you some valid suggestions... if you still have problems you can try a form css framework like formee... http://www.formee.org/